REFERENCE
- Gallery page: https://magpui.com/en/i/silk-strand-hero-for-ui-library-6e101a
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/silk-strand-hero-for-ui-library-6e101a/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/silk-strand-hero-for-ui-library-6e101a/clip.mp4
- Original post: https://x.com/Ashishgogula/status/2116159196899246199 by @Ashishgogula
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 dark, premium landing hero for a UI component library. On a near-black page, hundreds of thin silky light strands sweep out radially from a small chrome 3D logo mark at the center, like brushed hair or fiber optics, flowing slowly. On load the scene fades in from pure black, then a two-line headline blurs in word by word, followed by a short subline and two pill buttons. It should feel calm, expensive and cinematic.
DESIGN SYSTEM: Full-viewport hero, background #050505. Strands in cool silver (#c9ccd6), soft lavender (#8d86b8) and warm sand (#b9a27a), additive blending, brightest near the center and fading to black at the edges. Chrome mark about 64px, metallic with sharp highlights. Headline centered below the mark: bold grotesk sans, about clamp(40px, 5vw, 72px), weight 600, letter-spacing -0.03em, line-height 1.05, white #f5f5f5 with two key words tinted muted gold (#d8c79a). Subline 15px, gray #8a8a8a, max-width 520px. Buttons 40px tall, radius 999px: primary filled white with black text, secondary dark (#141414) with 1px #2a2a2a border. Minimal top bar 56px: small logo left, four 13px gray text links right.
MOTION: 0-1200ms: strands fade from opacity 0 and fan outward from the center (radius scale 0.6 to 1), cubic-bezier(0.22,1,0.36,1). Strands keep flowing with curl noise, about 0.05 units per second, never looping visibly. 900ms: headline words enter with blur(12px) to 0, opacity 0 to 1, y 12px to 0, 600ms each, 90ms stagger, cubic-bezier(0.16,1,0.3,1). After the headline: subline fades in (400ms), then buttons and a small trust row (300ms, 60ms stagger). The chrome mark rotates slowly on Y (one turn every 20s). Pointer: strands bend gently away from the cursor within a 200px radius, eased back over 600ms.
SECTIONS: Top bar (logo, links). Hero: strand field with chrome mark, headline, subline, primary and secondary buttons, a tiny row of small icons and a credit line under the buttons.
IMPLEMENTATION: three.js (or OGL) full-screen canvas behind the DOM: strands as instanced line segments or thin ribbons whose points are advected by a curl-noise vertex shader, additive blending, a small bloom pass. Chrome mark as a simple extruded shape with an environment map. Text and buttons stay real DOM, animated with Motion. prefers-reduced-motion: render one static frame of the strands and use a plain 300ms fade for text. Cap devicePixelRatio at 2, pause rendering when the tab is hidden or the hero leaves the viewport, keep under 4ms GPU per frame on a laptop. Buttons have visible focus rings.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens; never copy logos, brand names, photos or illustrations from the original; use a placeholder mark and copy.
SUCCESS CHECK:
- On load the strands fan in from black before the headline appears word by word with a blur.
- The strands keep flowing and bend away from the pointer without dropping below 60fps.
- With reduced motion the hero is static and the text is fully readable immediately.
