← ClaudeAtlas

artistic_web_designerlisted

Design and build art-directed, scroll-driven websites where a generated cinematic sequence is scrubbed by scroll — a story that reveals itself as the reader descends, with hand-authored rhythm, precise motion, and generated artwork produced through Higgsfield (Seedance / Nano Banana) via its MCP or CLI. Use this skill whenever someone wants a scroll-to-reveal, scrollytelling, cinematic, immersive, animated, "3D", parallax, or award-style landing page or hero; whenever they describe a site that should "unfold", "reveal itself", "feel like a film", or "take you somewhere" as you scroll; whenever a brand or studio site needs real art direction rather than a template; whenever generated video or imagery needs to drive a page's motion; and whenever an existing scroll experience desyncs, stutters, fails to reverse, or breaks on mobile or Safari. Also use it for the supporting craft: authoring scroll timelines, scrubbing image sequences on canvas, key-plate art direction, first/last-frame clip chaining, and drawing
tahabahrami/artistic-web-designer · ★ 1 · Web & Frontend · score 74
Install: claude install-skill tahabahrami/artistic-web-designer
# Artistic web designer Build websites that behave like directed films: one continuous camera move, scrubbed by scroll, with typography and interface composed on top of it. The whole discipline reduces to two ideas. **One number drives everything** — a normalized scroll progress from which every visual state is a pure function. And **the artwork is directed, not collected** — generated in a planned order from approved key frames, so twenty assets read as one authored piece. Everything else in this skill is those two ideas applied. ## What good looks like - Scrolling forward advances; scrolling back genuinely reverses; stopping freezes on a coherent frame; refreshing mid-page rebuilds exactly what was on screen. - The opening is an overture. Every motif it introduces — a line, a marker, a frame, a number — becomes a component used further down the page. - Typography is real HTML/SVG layered over the footage. Nothing readable is ever generated into an image. - Mobile is a separately directed composition that hits the same beats, not a crop. - It runs at 60fps on a phone, and it has a reduced-motion path that is legible rather than empty. ## The workflow Work in this order. The expensive mistakes all come from doing step 4 before step 3, or step 3 before step 2. ### 1. Read the brief for what it rejects The negative space in a brief carries more information than the positive. "Mature, cinematic, slightly raw" is vague; "not a mascot company, not a children's i