REFERENCE
- Gallery page: https://magpui.com/en/i/black-hole-in-flowing-text-651a24
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/black-hole-in-flowing-text-651a24/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/black-hole-in-flowing-text-651a24/clip.mp4
- Original post: https://x.com/buildwithsid/status/2112492064336388249 by @buildwithsid
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: Create a standalone animated typography artwork, not a full website. Fill a light rectangular field with tightly spaced repeating prose, then bend and scatter the characters around a drifting black-hole-like silhouette. The central void remains pale, outlined by a dark, uneven elliptical orbit; surrounding words stretch into curved streams. The effect should feel like a printed page pulled by gravity, not a glowing space illustration.
DESIGN SYSTEM: Use a responsive landscape canvas around 1.67:1. Background approximately #F4F4EF; glyphs #252525 with lower-opacity gray fragments. At 960px width, target 7–9px bookish serif text, 9–11px line spacing, and a 10–16px outer inset. Use neutral placeholder prose, never source wording. The distorted circular region spans roughly 25–35% of the canvas width. A narrow elliptical band crosses its lower half. No cards, buttons, gradients, shadows, or colored accents within the artwork.
MOTION: Autoplay on entering the viewport. Keep the base rows legible away from the distortion; apply continuously changing displacement and localized character breakup near the orbit. As a reconstruction target, run a 48000ms looping phase, moving the distortion center from about 65% to 35% of the width and back, with cubic-bezier(0.45,0,0.55,1). Cycle angular displacement over 12000ms with linear cubic-bezier(0,0,1,1); offset individual glyph phases by 10–30ms to prevent uniform ripples. Avoid abrupt resets. These timings are implementation targets, not measured source values.
SECTIONS: One artwork surface: dense prose field, circular pale void, dark crossing orbit, and dispersed glyph halo. No invented navigation or page sections. Provide a small pause/resume control outside the canvas.
IMPLEMENTATION: Use Three.js with an orthographic camera, an instanced glyph atlas, and a vertex shader for radial/tangential deformation. Maintain stable per-character seeds instead of randomizing every frame. Use real glyphs rather than point sprites. Cap pixel ratio at 1.5 and instance count near 18000; pause when offscreen and dispose GPU resources on unmount. With prefers-reduced-motion, render a single static distorted frame. Give the canvas a concise accessible description and make the external pause control keyboard-operable with a visible focus ring.
ADAPT TO THE PROJECT: Reuse existing tokens, components, and fonts; map these colors to the closest project tokens. Never copy logos, brand names, photos, illustrations, or prose from the original. Use placeholder text.
SUCCESS CHECK:
- At rest, tiny text fills the field edge to edge while a clear pale circular void and dark elliptical orbit remain recognizable.
- The six sampled moments vary the center position and letter deformation without changing the restrained monochrome palette.
- Pause works from the keyboard, reduced motion is static, and the animation stops rendering offscreen.
