REFERENCE
- Gallery page: https://magpui.com/en/i/ascii-sharks-around-a-prompt-67adea
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/ascii-sharks-around-a-prompt-67adea/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/ascii-sharks-around-a-prompt-67adea/clip.mp4
- Original post: https://x.com/stackedlol/status/2112257760628986188 by @stackedlol
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 self-contained chat welcome component with several top-down sharks rendered as tiny monochrome text characters swimming around and behind a central heading and prompt composer. Keep the result airy and slightly surreal, not a dark terminal or a full dashboard. The observed sequence contains changing shark positions, rotations and partial off-screen silhouettes; keep the central UI still and readable.
DESIGN SYSTEM: Use a near-white #FAFAF8 field with a diffuse warm gray #DFDFD5 glow behind the composer. At desktop, center a roughly 620px-wide content group in a full-height canvas; clamp it to viewport width minus 40px on mobile. Use a light neo-grotesk heading around 40px, weight 400, slightly tight tracking, in #454741. Place the composer 18px below, approximately 620 by 90px, with a translucent off-white fill, a 1px #DEDED7 border, 10px radius and extremely soft shadow. Keep secondary controls tiny and muted. Render shark glyphs on a fixed character grid, approximately 5-8px cells, with gray, charcoal and warm taupe values representing surface shading. Sharks vary from around 140px to 330px long; some are faint and distant, others distinctly patterned.
MOTION: On mount, run continuous swimming paths around the central content. Suggested reconstruction timing, not measured source values: use 14000-22000ms closed paths with linear cubic-bezier(0,0,1,1), phase offsets of 0, 3200 and 6800ms, and slow orientation following the path tangent. Animate tail yaw roughly plus/minus 12 degrees over 1200ms with cubic-bezier(0.45,0,0.55,1); add a weaker body bend with phase delay toward the tail. Vary depth and glyph contrast gradually over 4000-7000ms using cubic-bezier(0.45,0,0.55,1). Allow silhouettes to enter and leave the viewport edges, as seen in the reference. Keep the heading and composer stationary; do not infer cursor-following behavior or a scroll trigger.
SECTIONS: Decorative full-bleed ASCII swimming layer; centered welcome heading with neutral placeholder copy; a translucent multiline prompt field; small attachment and microphone affordances at bottom left; a compact submit control at bottom right. Idle shows ongoing background swimming. Focus visibly outlines the composer without moving it. Empty submit is disabled; typing enables submit. Do not invent a chat transcript or additional page sections.
IMPLEMENTATION: Use Three.js to render a small orthographic scene of original procedural shark meshes into a low-resolution render target, then an ASCII postprocessing pass with a monochrome glyph atlas and luminance-based character selection. Model tapered bodies, pointed snouts, paired fins and forked tails with simple geometry rather than using source artwork. Keep the composer in accessible DOM above a pointer-events-none canvas. Use shallow depth and low contrast behind the text. Limit to 3-5 sharks, one shared atlas, a capped pixel ratio of 1.5 and at most 30fps on mobile; avoid one DOM node per character. Pause when the document is hidden and dispose GPU resources on unmount. With prefers-reduced-motion, render a single static composition; without WebGL, show a static locally generated ASCII silhouette. Label the input and icon buttons, preserve keyboard editing and submit, and provide a visible 2px focus ring.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map these estimated colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original. Use neutral text, placeholder controls and original procedural geometry.
SUCCESS CHECK:
- Sharks remain recognizably built from characters, with fins and tails legible through rotation.
- Changing paths and depth never make the central heading or prompt field hard to read.
- Keyboard input and submission work independently of the canvas, and reduced motion produces a still scene.
