REFERENCE
- Gallery page: https://magpui.com/en/i/studio-site-strung-on-one-svg-line-ce9094
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/studio-site-strung-on-one-svg-line-ce9094/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/studio-site-strung-on-one-svg-line-ce9094/clip.mp4
- Original post: https://x.com/greensock/status/2117246347191746971 by @AyzZTheDesigner
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.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- Walking characters with signs: Two stylized flat-illustrated young people walking side by side, each holding a blank white sign, plus two small walking cats, limited palette of orange-red #F0461E, black and white, thick clean outlines, retro editorial illustration style, plain transparent background, 16:9
BUILD
A one-page site for a small creative studio built around a single continuous orange line. After a short logo loader, the hero shows a giant two-line headline with two illustrated people carrying signs and cats walking past; below, a curved text band scrolls sideways; then a large statement paragraph colors in word by word; then the services section, where one thick line draws itself as you scroll, looping and snaking past each service name; it ends in a big blob shape that floods the screen in orange. It should feel bold, warm, cheeky and handmade.
DESIGN SYSTEM
- Background blush cream #F9E9E2, primary orange-red #F0461E, text black #111111, white cards #FFFFFF; the whole page sits inside a rounded frame (radius 16px) with 16px orange margin around it.
- Display type: a chunky condensed retro grotesk / soft display face, all caps, 96-140px, line-height 0.9, letter-spacing -0.01em, set in orange. Statement paragraph: a heavy rounded grotesk 44-52px, line-height 1.1, black. Small UI text 11-12px.
- Header 56px: two small white pill buttons left ("Work", "About"), centered small logo, right a local time/date label and a black pill CTA with an orange dot.
- Service labels: caps orange 40-56px, each with a tiny orange icon chip (24px, radius 4px) and a white caption card (radius 8px, 11px text, soft shadow 0 4px 12px rgba(0,0,0,.08)) floating next to it.
- Line: stroke #F0461E, 14-18px wide, round caps and joins.
MOTION
- Loader: a small hand-drawn monogram draws its stroke in 700ms, then the frame scales from 0.96 to 1 with the hero headline sliding up 60px, 800ms cubic-bezier(.16,1,.3,1).
- Hero: the two figures and cats walk in place (sprite or SVG part swing, 900ms loop), a small black pill label rotates -6 deg and bobs.
- Curved marquee band: an orange arc ribbon with white caps text moving left continuously, 25s per loop, linear, speeding up slightly with scroll velocity.
- Statement: words go from 20% orange to full black as they pass the center of the viewport (scrubbed, one word per ~2% scroll), one phrase gets an orange highlighter pill behind it.
- Services: pinned for ~300vh; the line's stroke-dashoffset is scrubbed 1:1 with scroll so its tip travels through loops and curves; each service label and its caption card pop in (scale .8 -> 1, opacity, 400ms, cubic-bezier(.34,1.56,.64,1)) when the line tip reaches it.
- Outro: an orange blob path morphs and grows from the bottom to cover the frame, 1000ms scrubbed, while the next headline slides in.
SECTIONS
1. Loader with monogram.
2. Hero: two-line headline, illustrated figures with signs, cats, small tilted label.
3. Curved marquee ribbon with a slogan.
4. "A bit about us" kicker and the scroll-colored statement paragraph.
5. Services path: six services placed left, center and right along the line with icon chips and captions.
6. Orange flood outro with a big closing headline and contact CTA.
IMPLEMENTATION
- GSAP ScrollTrigger for pinning and scrub; DrawSVG-style reveal with stroke-dasharray/stroke-dashoffset on a single SVG path (use getTotalLength); SplitText or a manual word split for the statement; MorphSVG or path interpolation for the blob. Make the SVG path responsive with a viewBox and recompute lengths on resize.
- prefers-reduced-motion: show the line fully drawn, all labels visible, marquee static, statement fully black.
- Keyboard: header buttons and CTA are real links with clear focus rings; content order in the DOM follows the visual order.
- Performance: animate only transform, opacity and stroke-dashoffset; one ScrollTrigger per section; lazy-load illustrations.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, fonts and button components and map the orange and cream to the closest tokens. Do not copy the original logo, studio name, slogans or illustrations: use placeholder characters and text.
SUCCESS CHECK
- Scrolling the services section draws one continuous line whose tip reaches each service label exactly when it appears.
- The statement paragraph colors word by word in both scroll directions.
- With reduced motion enabled the whole page is readable with the line fully drawn and no movement.
