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 illustration studio" is precise — it names the attractor the work keeps falling into, and generative models have strong defaults that will drift straight back toward it.

Before anything else, write down: three adjectives the work must earn, three it must never be, the exact palette as hex with a note on which colour must not dominate, and what the reader should feel in the first two seconds. If there is a moodboard, extract its DNA — palette relationships, contrast, texture, type attitude, use of negative space — not its content. Say explicitly what you took and what you deliberately did not.

Read references/art-direction.md §1–3 before designing anything.

2. Design the page, then build the opening backward

Look at the sections beneath the hero before designing the hero, and derive its rhythm from theirs — the grid, the type scale, the section numbering, the weight of rules and frames. An opening designed in isolation will not match the page it opens.

Find the organizing metaphor: a descent, a transit line, a signal tuning in, a machine assembling. It decides camera movement, transitions, section labelling and what the reusable components are. Hold the discipline that the metaphor organizes the work and is not the subject of it — a studio site framed as a transit system is still a site about the studio.

Then write the continuity table, mapping each opening element to the component it becomes below. Anything with no descendant is decoration; give it one or cut it.

3. Author the score before making any art

This is the step people skip, and it is where the rhythm actually lives. Write the timeline as named ranges in a config module, in normalized 0..1, before a single asset exists:

export const CHAPTER_LENGTH = {
  opening: { desktop: 520, mobile: 300 },   // svh
  work:    { desktop: 360, mobile: 320 },
}

export const STAGES = {
  SIGNAL:        [0.00, 0.117],
  DESCENT:       [0.117, 0.333],
  WORLD_WINDOWS: [0.333, 0.667],
  ARRIVAL:       [0.667, 0.850],
  PAGE_RELEASE:  [0.850, 1.000],
}

export const PHASES = {
  readout:  [-0.03, 0.03],   // negative start: already legible on frame one
  headline: [0.72, 0.85],
  actions:  [0.84, 0.91],
}

Boundaries land where the footage actually changes, not on round numbers. Ranges outside 0..1 are deliberate: a phase starting below zero is already present on the first painted frame; one ending above 1 is still leaving as the chapter ends, so the exit reads as continuous with what follows.

Naming the stages first is what lets you brief the footage precisely — you are commissioning a clip to cover DESCENT, not "some cool motion".

4. Generate the artwork, key plates first

Stills before motion, always. Iterating on a still costs a minute; iterating on ten seconds of video costs many minutes and far more credits.

Generate the key plates at a wide aspect (21:9 works well) and crop down: the first frame, the midpoint the camera passes through, and the final composition the headline lands on. Design that last plate for the typography — if the headline goes large on the left, reserve genuinely empty space there in the prompt, not "busy but low contrast".

Present the plates for approval. Then generate motion, chained:

| Clip | --start-image | --end-image | | --- | --- | --- | | 01 | plate A | plate B | | 02 | plate B | — free travel | | 03 | last frame of clip 02 | plate C |

After the first clip, never generate from a text prompt alone — first/last-frame chaining is what holds camera, lighting and palette across joins the reader never sees. Append the same shared style block, including its negative constraints, to every prompt; that is what makes the set look like one project.

Approve the direction once at the plate gate, then generate the batch — do not ask permission asset by asset.

Read references/art-direction.md for prompt construction and references/higgsfield.md for the parameters and the constraints that cost time (mode fast caps at 720p; there is no 16:10; turn generate_audio off). If the higgsfield-generate or seedance-20 skills are installed, use them for the API surface and keep this skill for the direction.

5. Build the pipeline

Scroll-driven motion ships as a WebP frame sequence on canvas, never as scrubbed ` — generated clips carry a single keyframe and a trailing moov atom, so seeking backward is progressively more expensive and fast scrubbing silently desyncs. frameIndex = round(p * (count - 1))` has none of that.

Copy scripts/build-sequences.mjs into the project and edit its tables. It handles concatenating chained clips losslessly, sampling at exact timestamps (with the retry that catches ffmpeg's silent zero-byte seek failure), WebP encoding, posters and ambient ping-pong loops.

Sizing: resolution is the lever, not quality — grain and halftone barely respond to the quality setting. Aim for a frame every 3–5 svh. Details and budgets in references/media-pipeline.md.

6. Build the page

Copy assets/engine/ into the project — engine.js, sequence.js, dom.js, math.js. This is working, debugged code; rewriting it means re-earning bugs that are already fixed. assets/engine/README.md is the wiring guide.

Scenes are pure render(p, ctx) functions. No state, no direction branching, no "has played" flags, and no layout reads inside render. If render(0.4) can produce two different results depending on how the reader arrived, the experience is broken in five ways at once.

Chapter lengths in svh, never vh — with vh the mobile URL bar changes document height mid-gesture and the composition moves under the reader's finger.

For React or Next, read references/react-adapter.md. The short version: nothing the engine animates may be React state, mount in useLayoutEffect, and destroy() in the cleanup or Strict Mode gives you two engines fighting.

Read references/scroll-architecture.md when building this, and again whenever a scroll bug stops making sense — it has a symptom-to-cause table.

7. Verify properly

Screenshots do not prove correctness here; the interesting failures are conditional. Copy scripts/qa-scroll.mjs, configure its handful of constants, and run it against Chromium, Gecko and WebKit — they differ in ways that matter for sticky positioning and wheel granularity.

The essential assertion is direction-independence: reach seven sample positions from above and from below, capture a visual signature at each, and compare them. Include width, height and colour in the signature, not just transform and opacity.

Then look at the work: walk the page with Playwright and capture screenshots, and walk the opening's own 0..1 range at finer granularity. Check the first frame especially — it is what every visitor sees and the likeliest to carry a generation artifact. Drive this with Playwright rather than an embedded browser, which throttles requestAnimationFrame when unfocused and makes seeks look broken when they are not.

references/verification.md has the full property list and the mobile and reduced-motion passes.

Things worth holding to

Never generate readable text. No headlines, labels, numbers or logos in any generated asset — it will be wrong, it cannot be edited, translated, selected or read aloud, and it cannot re-wrap. Keep it as a hard negative in the style block. Draw the mark as SVG geometry instead, generated from a script so the nav, footer and favicon set come from one definition and cannot drift.

Keep the layers separate: footage / typographic overlay / navigation and controls / texture. Nothing essential is ever baked into the video.

Performance is architectural, not a pass at the end. No framework state per frame, refs and canvas for hot updates, DPR capped at 2, bounded frame residency, progressive loading, and a boot state gated on the first few real frames rather than a spinner on a white page. The loading state should come from the same visual system as everything else.

Say when something is wrong. If a generated plate carries an artifact, or a composition is not working, name it plainly rather than quietly patching pixels — regenerating from a corrected plate beats a smudge band across thirty frames, and changing an approved plate is the user's call.

Files

| Path | Read when | | --- | --- | | assets/engine/ | Building the page. Copy these four files in; README.md wires them up. | | references/scroll-architecture.md | Building, or debugging anything scroll-shaped. Has a symptom → cause table. | | references/art-direction.md | Before generating anything. Prompt construction, chaining, continuity. | | references/media-pipeline.md | Turning clips into shipped assets. Sizing, ffmpeg recipes, budgets. | | references/higgsfield.md | Before a generation batch. Parameters and the constraints that waste time. | | references/react-adapter.md | The project is React or Next. | | references/verification.md | Testing. The property list, and assertion hygiene. | | scripts/build-sequences.mjs | Copy into the project; edit the tables at the top. | | scripts/qa-scroll.mjs | Copy into the project; configure the constants at the top. |

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: tahabahrami
• Source: tahabahrami/artistic-web-designer
• License: MIT

Install and usage instructions live in the source repository linked above.