A channel card that presses its own subscribe button and then rings its own bell, with a cursor that travels to each in turn
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
Channel name, set large. Two or three words reads best at this size.
now: Northlane Works
The @handle under the name. Include the @. It is what makes the card read as the platform rather than as a generic card.
now: @northlaneworks
One or two characters drawn in the avatar ring. Empty falls back to the channel's first letter. This registry ships no image files, so the avatar is drawn rather than loaded.
now: NW
Fill behind the initials. The channel's own colour is the point of it.
now: #FF0033
Button text before the press.
now: Subscribe
Button text after it, shown with a tick.
now: Subscribed
The unpressed button fill. Turns to a muted surface once subscribed, the way the real control does.
now: #FF0033
Draw the pointer that travels to the button and then to the bell. Turn it off for a calmer card that still changes state.
now: true
Brand preset. Dark presets read as the platform's dark mode; light ones as its light mode.
now: circuit
No Tailwind, no CSS, no asset files. Inline styles only.
A subscribe prompt that performs the subscribe: a channel card with a drawn avatar, name and handle, a red subscribe button and a bell. A pointer travels in from the corner, presses the button, which dips and springs back, and the label flips to a ticked 'Subscribed' on a muted fill. After a beat the pointer moves to the bell, which pulses and shakes through three decaying oscillations and fills in. Two separate beats with a gap, so each state change is read before the next begins.