A staggered list with a component

A list is the classic case for components: one row, many copies, each with its own text and timing. When you change the row, every copy follows. In this walkthrough you build a notification row, turn it into a component, expose its title and detail as props, stagger four instances by 60 ms and add a quieter “read” variant. About twenty minutes.

1. Build one row#

1. Press ⌘N and send: “A 390 × 520 canvas. One notification row: a rounded card 320 × 68, a round accent icon on the left, a title ‘New message’ and a smaller detail ‘Tap to open’. The card rises 14 pt and fades in on a 0.45 s spring; the content follows 30–100 ms later.”
2. Check the row on the stage. Adjust anything by hand now: it's cheaper before you make copies.

2. Turn it into a component#

1. Select the card, icon, title and detail (marquee them, or select their group).
2. Press ⌥⌘K (Stage → Create Component), or click Create component in the selection bar.
3. The layers become a component named after the selection, and one instance takes their place, marked in magenta. Its timing is kept: the instance starts at the first keyframe.

3. Expose props#

1. Double-click the instance to open the component. The timeline header shows ‹ Main timeline › ◆ Row, and the stage pill names the component with Done.
2. Select the title text. The inspector shows Expose as prop (◇).
3. Click ◇ next to Text. It turns into ◆ with the prop's name, taken from the layer's name (title for a layer called title). Rename it from the component's Props list (right-click → Rename…) if you like.
4. Select the detail text and expose its Text too (detail).
5. Click Done or press esc to go back to the main timeline.

4. Place four copies#

1. Select the instance and press ⌘D three times. Arrange the copies 84 pt apart (drag with ⇧ to lock the axis, or use Stage → Align → Distribute).
2. Select the second row. In the inspector's Props, type a new title and detail, for example “Payment received” and “€ 24.00 from Mia”.
3. Fill in the third and fourth rows the same way.

5. Stagger their clocks#

Each instance plays the component on its own clock. The Instance section sets it:

1. Select row 2 and type 0.06 in Start. Repeat for rows 3 and 4.
2. Or select all four and ask the AI “stagger the rows by 60 ms from the top”. Stagger works on instance clocks, so the component itself stays untouched.
3. Play it. The list reads top to bottom as one gesture.

6. Add a read variant#

1. Open the component again (select an instance and press ⌘↓).
2. In the stage pill, click the variant menu (Base) → Add Variant…. Enter set state and value read, then Add. The stage now edits state: read.
3. Make the icon gray and the title softer. These changes are stored as differences from the base.
4. Switch back to Base in the same menu and click Done.
5. Select rows 3 and 4. In the inspector's Variants, set state to read.

7. Export#

Press ⌘E → Motion (React). The scene has instances and no states, so you get one typed function component per component, with its props and variant set as a string union:

<Row title="Payment received" detail="€ 24.00 from Mia" delay={0.06} />
<Row title="Build finished" detail="main · 2 min ago" state="read" delay={0.12} />

SwiftUI gets a View per component, Lottie a precomp per combination of props and variant.

Variations#

• Nested icon swap: put an icon component inside the row and expose it as an Instance prop, so each row picks its icon. See Nested components and swaps.
• Looping loader: set a small spinner component's Play to Loop and place it in a longer scene.
• Hover a row: add a hover variant and a trigger with Set variant. See Triggers.

Related articles#

• Create a component
• Props
• Variants
• Instances: start, speed and play mode