Remotion app walkthrough prompt — screens + cursor

<direction> An 8-second square app walkthrough for a habit app. A phone frame holds centre frame; three screens tour in sequence — Home, Insights, Settings — one per segment. A white cursor dot glides to the element that matters on each screen, pulses once, and a one-line callout lands under the phone. Sample screens, labelled on screen. Banned: fake device photography, glows, gradients, hand emojis, swoosh transitions, unreadable micro-text. </direction> <structure> Per screen (~2.5s each): Beat 1 — screen cuts in (hard cut, walkthroughs cut). Beat 2 — cursor glides from the previous target to the new one over 22 frames. Beat 3 — click pulse: an accent ring expands and fades. Beat 4 — callout springs up under the phone, e.g. "Your day, one glance". Final screen holds. </structure> <build> One Remotion composition, 1080x1080 square, 30fps. Screens are plain React components swapped by segment index — no video, no screenshots. Cursor position interpolates between per-screen targets stored in an array. The pulse ring is a bordered div scaled by interpolate() with fading opacity. </build> <gotchas> The cursor must arrive BEFORE the pulse fires, and the callout after — overlap the three and the tour reads as noise. Keep phone content coarse: at preview size, anything under ~20px is decoration, not information. </gotchas> Before you finish: step through the timeline at five points and fix anything that overlaps, clips the frame, or drifts off the beat grid.