REFERENCE
- Gallery page: https://magpui.com/en/i/sandy-zen-onboarding-loader-cd2b8a
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/sandy-zen-onboarding-loader-cd2b8a/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/sandy-zen-onboarding-loader-cd2b8a/clip.mp4
- Original post: https://x.com/kshvbgde/status/2118047512535978321 by @kshvbgde
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: Build a two-stage workspace onboarding interaction: a calm white name form that, on submit, crossfades into a full-bleed top-down sand surface where concentric zen-garden patterns rake themselves into the dunes while translucent status pills announce each setup step. It should feel quiet, tactile and a little magical — progress told through sand, not a spinner.
DESIGN SYSTEM: Stage A — centered column about 420px wide on #ffffff. Headline ~32px bold black sans "What are you working on?"; subline 15px gray (#6b7280) "We'll set up the rest."; 16px gap. Input: full width, height 48px, radius 12px, background #f3f4f6, placeholder "Company or project", 15px text, no hard border. Primary button below (12px gap): full width, height 48px, radius 12px, fill #3b82f6, white 15px medium label "Set up workspace"; hover lightens to #60a5fa, pressed #2563eb. Stage B — full viewport sand field: base color #d4b896 with ripple dunes in #c4a57a / #e8d4b8 alternating bands (~18–28px wavelength, soft lighting from top-left). Status pill: bottom-center, height 36px, padding 0 18px, radius 999px, background rgba(255,255,255,0.72), backdrop-blur 12px, 1px rgba(0,0,0,0.06) border, 13px dark text.
MOTION: (1) Typing: caret blink 1s; button stays disabled until ≥2 characters. (2) Submit: button scale 0.98 for 80ms then release; form fades and rises 12px over 420ms cubic-bezier(0.22,1,0.36,1) while sand layer fades in over 500ms. (3) Sand idle: subtle shimmer of grain (noise UV shift ~0.3px/frame at 30fps). (4) Pattern sequence (~2.2s each, crossfade 300ms): A concentric rings (4 rings, stroke ~3px carved darker sand, draw stroke-dash from center out over 1800ms ease-out); B geometric mandala / dial (6 radial spokes + teardrop lobes, stagger 80ms per spoke); C radial grid with short vertical tick lines carved left and right of the circle (ticks appear L→R over 900ms). (5) Status pills cycle in sync: "Creating {name}" → "Setting up your agent" → "Importing your data" → "Drafting your first report"; each pill fades/slides up 8px in 220ms. (6) Done: soft hold 400ms then hand off to the next route. prefers-reduced-motion: skip sand drawing, show static final pattern and fade status text only.
SECTIONS: Form (headline, subline, input, button); sand canvas layer; status pill; states idle / typing / submitting / creating / importing / drafting / done.
IMPLEMENTATION: React + Tailwind for the form; Canvas 2D or a small WebGL/three.js plane with a sand height/noise shader for dunes and a second pass that darkens carved strokes (store stroke mask in an offscreen canvas). Keep DPR capped at 2, pause when offscreen, under 8ms/frame. Input and button are real form controls with labels; pill text in an aria-live polite region. Keyboard: Enter submits.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map blue/sand to the closest tokens; never copy logos, brand names, photos or illustrations from the original; use a placeholder project name.
SUCCESS CHECK:
- Submitting a name transitions to the sand stage with the name appearing in the first status pill.
- At least three distinct carved patterns play in sequence without a generic spinner.
- prefers-reduced-motion shows a static sand frame and simple fading status text.
