The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Anime Character Run Cycle Showcase

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build a run-cycle viewer for [BRAND], plus a studio page. The hero is an original human runner named [CHARACTER], a [ROLE], about 7.5 heads tall, made only from code primitives with a bone hierarchy, toon shading, dark outlines, lagged hair and a waist tie, and one seamless 0.80 second run. The plaster lane scrolls at the planted foot's speed. Controls: pause, 0.35x slow motion, a phase scrubber, orbit and zoom, three camera presets, and hair and uniform color pickers. A side panel names contact, recoil, passing and flight and stays locked to the scrubber. The studio page is written for [AUDIENCE], at [STUDIO_ADDRESS], with a four-evening clinic priced [CLINIC_PRICE].

- Audience: [AUDIENCE] who learn timing by stopping a figure, and teachers who want a class viewer rather than a model download.
- Goal: Make one stride readable: which foot is down, when the hips drop, when both feet leave the lane, and how a recolor leaves the rig unchanged.
- Tone: Calm, concrete, practical US English. Short teaching sentences. No slogans and no hype.

## Stack
- Framework: Vite 6 + TypeScript + Three.js
- Styling: Vanilla CSS
- Libraries: three (MIT), @fontsource-variable/fraunces (OFL-1.1), @fontsource-variable/figtree (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Install [email protected]. Dev dependencies: [email protected] and [email protected]. Do not add React, a component kit, a postprocessing stack, or an animation library.
  - vite.config.ts sets base to ./, build.sourcemap to false, and build.outDir to dist. rollupOptions.input includes index.html and studio.html. The production build is minified and does not copy src/ into dist.
  - TypeScript strict mode. Import OrbitControls from three/addons/controls/OrbitControls.js in the installed package. If that path fails, use three/examples/jsm/controls/OrbitControls.js from the same package. Never from a CDN.
  - Put every visible string, swatch list, phase card, FAQ answer and image alt in src/content.ts. When any variable differs from its default, rewrite copy that would no longer be true, at the same length and structure. Do not change the rig, the cycle keys, the swatch hex values, or the layout.
  - Import @fontsource-variable/fraunces/wght.css, @fontsource-variable/figtree/wght.css, and @fontsource/ibm-plex-mono/400.css plus 500.css from the installed packages. Display stack is Fraunces with opsz 72. Text stack is Figtree. Phase numbers use IBM Plex Mono. Do not request fonts from any CDN.
  - Share one mountStage function between index and studio so the rig cannot drift. index wires the dock and the phase rail. studio mounts an autoplaying orbit-only stage.
  - index.html and studio.html each set a plain title of [BRAND], link ./favicon.svg, and load their module script. No meta description, Open Graph, JSON-LD, or analytics.
  - If WebGL cannot start, show the code-drawn four-pose fallback and keep pause, speed, scrubber and color controls working. Do not show a blank page.

## Variables
- [BRAND] — Studio name (default: "Fernwick Motion"). Invented studio. Not a real company, and not the name of this template.
- [CHARACTER] — Runner name (default: "Juniper Hale"). Used in sentences and the stage caption. The mesh and the face stay the same.
- [ROLE] — Role in copy (default: "track sprinter"). Wording only. Do not change the singlet, shorts, shoes, hair shape, or cycle.
- [AUDIENCE] — Who the clinic is for (default: "junior character animators"). Fits mid-sentence, for example before the word sit.
- [STUDIO_ADDRESS] — Street and city (default: "14 Lumen Court, Providence"). An invented street. Shown in the rail, the visit block and the footer.
- [CLINIC_PRICE] — Clinic price (default: "$240"). Include the currency symbol. Used on the header chip and the clinic section.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/anime-character-run-cycle-showcase in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Paper `#F6F1E8` — Page background
- Card `#FFFCF8` — Header, dock, rail and studio cards
- Ink `#1C1917` — Text, focus rings and swatch selection
- Muted `#6B645C` — Secondary text and inactive tick labels
- Persimmon `#E25B2A` — Active control, current link, clinic chip, active phase rule
- Line `#E4D8C8` — Borders, scrubber track and photo frames
- Cyclorama `#F6F0E6` — Studio backdrop behind the runner
- Floor `#E7D9C8` — Lane floor
- Outline `#1A1423` — Toon edge on the runner
- Skin `#E7B48A` — Fixed skin color
- Hair `#1B3A4B` — Default hair swatch, Ink
- Uniform `#E2A322` — Default singlet, Marigold
- Shoe `#2A2926` — Racing-flat upper
- Sole `#C9C3B6` — Stone-colored sole

### Typography
- Display: Fraunces (OFL), weights 500/700
- Text: Figtree (OFL), weights 400/600
- Mono: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: 8px base. Header 56px on desktop and auto on mobile, at least 52px. Phase rail 336px with 20px padding. Dock 84px tall, 16px from the stage edges. Studio column max 1120px with 48px top padding and 24px side padding, 16px on mobile. Cards use 16px padding.
- Radius: 2px on buttons, cards, the dock and photo frames. Swatches are circles. No large pills and no soft glow.
- Motion: The cycle is 0.80 seconds at 1x. Slow motion multiplies the clock by 0.35. Phase is a loop from 0 to 1.
- Motion: Camera presets ease for 480ms with an in-out cubic. OrbitControls damping stays on. Reduced motion cuts instead.
- Motion: Hair and the waist tie lag their parents with exponential slerp. Reduced motion snaps them.
- Motion: Control color changes take 120ms. Reduced motion removes those transitions. No page-transition animation.
- Imagery: The hero is the code-built runner in a plaster cyclorama, large in the first screen, with empty space and light around the figure rather than type on a flat field. No photograph is used as a backdrop or as a texture. Staff photographs appear only on the studio page, as three waist-up working shots from one room: soft window light from the left, plaster walls, an oak table, muted ink, cream and indigo clothes. They are placeholders the next studio can replace.

## Pages & Sections
### [BRAND] — Run cycle (`index.html`)
1. **Studio header** — Wordmark [BRAND]. Links: Viewer to ./index.html, Studio to ./studio.html. Chip: Clinic · [CLINIC_PRICE], linking to ./studio.html#clinic.
   Layout: 56px bar, background #FFFCF8, 1px bottom border #E4D8C8, padding 0 20px, flex row, align center. Left: a 14px inline SVG of two stacked chevrons in #E25B2A, then the wordmark in Fraunces 700 at 18px, #1C1917. The SVG is decorative. Right of the wordmark, the two links in Figtree 600 at 15px, gap 20px. The current page, Viewer, has a 2px underline #E25B2A and aria-current=page. The chip is pushed to the far right: background #E25B2A, text #FFFCF8, padding 8px 12px, radius 2px, Figtree 600 at 14px. Minimum hit target 44px. On a 390px screen, the chip wraps to a second row with the links rather than overflowing. Focus-visible outline is 2px #E25B2A with 2px offset.
   Motion: Link underline and chip background do not animate, apart from the 120ms color change on hover. Hover darkens the chip to #C44B20.
2. **Run stage** — An original human runner, about 7.5 heads tall, bare forehead, human ears, no tail and no animal features. Stage caption, not covering the face: eyebrow Run cycle, heading [CHARACTER], line [ROLE]. The figure is [CHARACTER], described in copy as a [ROLE]. The mesh does not change when the role changes.
   Layout: Full-viewport WebGL stage. At 800px and up, html, body and the app root are height 100% and overflow hidden, so the viewer does not scroll. The stage is the left cell under a 56px header; the phase rail is 336px. The canvas fills that cell edge to edge. The transport dock overlays the bottom of the canvas only (16px inset, 84px tall, right edge stopping 16px before the rail). Default camera frames the crown about 12% below the top of the canvas and the shoes above the dock. Mobile (under 800px): the page scrolls; a 40px name strip sits under the header; the canvas is 62svh with a 420px minimum; the dock is in normal flow under the canvas and does not cover the shoes.

Scene, meters, Y up, character at the origin facing +Z. Clear color #F3EBE1. Hemisphere light sky #F7F4EF, ground #E4D3C2, intensity 0.55. Key directional from (2.4, 3.2, 2.8), intensity 1.25, color #FFF8F0. Fill from (-2.6, 1.6, 1.2), intensity 0.4, color #D9E6F2. Rim from (-1.2, 2.4, -2.6), intensity 0.45, color #FFE0C2. No shadow maps. A flat contact disc (circle radius 0.34, #1C1917 at opacity 0.16, y=0.008) sits under the hips and shrinks as the hips rise. Floor is a circle radius 5.5, toon color #E7D9C8. Behind the figure, a half cylinder radius 6, height 3.2, center y=1.4, open toward the camera, toon color #F6F0E6, no texture. Two lanes of dash boxes, size 0.09 x 0.012 x 0.36, color #C4B5A2, centered at x=-0.11 and x=+0.11, spaced every 0.95 along Z. Recycle a dash to the far end when its center passes z=-8. Dashes move toward -Z at a constant 2.0 m/s. That is a treadmill: the chest faces +Z, so the figure is running toward +Z.

Build the runner only from SphereGeometry, CapsuleGeometry, BoxGeometry and CylinderGeometry parented to Object3D bones. No SkinnedMesh, no glTF, no image texture on any mesh. After assembly, scale the root so the crown is 1.72 m high in the contact pose and the stance sole rests on y=0. Head height is 0.23 m, about 7.5 heads. Not a chibi.

Materials share one 4x1 nearest-filter canvas gradientMap (pixels #5c534c, #8a8178, #c4bbb2, #ffffff) on MeshToonMaterial. Skin #E7B48A. Hair uses the hair swatch, default #1B3A4B. Singlet uses the uniform swatch, default #E2A322. Shorts mix that uniform 22% toward #3A2E16. Calf sleeves mix it 40% toward #1C1917. A singlet side insert is #F4F0E6, or #1B3A4B when the uniform is #F4F0E6. Shoes #2A2926 and soles #C9C3B6 never recolor. Eyes, brows and mouth are MeshBasicMaterial with no outline. Every other mesh gets an outline child: same geometry, MeshBasicMaterial #1A1423, side BackSide, scale 1.035.

Bones: root > hips > thighL > shinL > footL, and the same on the right; hips > spine > chest > shoulderL > upperArmL > forearmL > handL, and the same on the right; chest > neck > head > hairLockL > hairLockL2, and head > hairLockR; hips > tie. Rest landmarks before the run offsets: hip joint y=0.92, knee y=0.48, ankle y=0.10, shoulder y=1.42, chin y=1.49, crown y=1.72. Thigh length 0.44, shin 0.38, upper arm 0.28, forearm 0.24.

Meshes: skull sphere radius 0.115 scaled (0.96, 1.08, 0.98); human ear spheres radius 0.022 scaled (0.55, 1, 0.45) at the sides, not pointed; sclera spheres radius 0.02 #F7F4EF and iris spheres radius 0.012 #1C1917 at x=±0.034, y=0.02, z=0.095, large enough to read on a full-body frame and still far smaller than a chibi eye; brow boxes 0.028 x 0.004 x 0.006 in the hair color; nose box #D9A67C; mouth box #8E4E4A. Hair cap is a sphere radius 0.118 scaled (0.98, 0.62, 1.02), shifted up 0.03 and back 0.03, leaving the front 35% of the skull as bare forehead. No fringe, no bangs, no cowlick. Left lock: two capsules (radius 0.012 length 0.07, then radius 0.01 length 0.06) ending at the jaw. Right lock: one capsule radius 0.011 length 0.055. Locks sit beside the cheeks, not down the back. Pelvis sphere, abdomen capsule, chest sphere, neck cylinder. Singlet shells are 1.08 times the chest and abdomen. Shorts cover the pelvis and the top 45% of the thighs. Arms are bare skin: upper-arm capsule radius 0.036, forearm radius 0.03, a box palm, four finger boxes and a thumb capsule. No sleeves. Calf sleeves cover the upper shin and leave the ankle bare. Each shoe is a box 0.07 x 0.04 x 0.16 with a sole box 0.074 x 0.012 x 0.17, stone sole, not red, not white. The tie is one box 0.028 x 0.18 x 0.008 on the left side of the shorts waistband, hanging to mid-thigh. It is a flat cloth tie, not a tail and not segmented.

Sign convention: positive rotation.x swings that limb's free end toward +Z. If a bone's long axis flips the sign, multiply that bone's pitch by -1 so the contact pose matches this description. Chest pitch is a constant 12 degrees of forward lean. Head pitch is a constant -9 degrees, and head yaw is -0.35 times the chest yaw, so the face stays quiet and looks down the lane.

Keys for the left leg and the left arm. Columns are phase, hipsY, hipsYaw, thigh, shin, foot, upperArm, elbowBend. 0.00: 0.94, -8, 34, 8, -6, -34, 20. 0.12: 0.86, -3, 8, 50, 6, -16, 34. 0.28: 0.98, 3, -14, 20, 6, 8, 24. 0.42: 1.05, 7, -36, 12, 26, 30, 16. 0.50: 0.94, 8, -32, 18, 22, 34, 18. 0.62: 0.86, 3, -4, 84, 10, 14, 36. 0.78: 0.98, -3, 20, 64, -2, -10, 26. 0.92: 1.05, -7, 40, 20, -12, -32, 18. Phase 1.00 repeats 0.00. Blend each channel with cosine ease between the surrounding keys. The right leg and the right arm sample the same function at phase+0.5. Chest yaw equals the negative of hips yaw. Elbow bend is flexion only, kept between 16 and 36 degrees, never a second swing and never locked straight. Hips roll is 4 degrees times sin(2π phase).

Stance lasts through recoil and ends as passing begins: left [0.00, 0.28), right [0.50, 0.78). During stance, two-bone IK holds that ankle at x=±0.11, y=0.09, and moves it toward -Z at 2.0 m/s, starting from the dash center it landed on. The sole stays flat. The dash and the shoe share that velocity, so the shoe does not cross onto the next dash. Outside stance, use the keyed rotations and keep the sole clearly off the floor. From 0.28 to 0.50, and from 0.78 to 1.00, neither foot is in stance. At phase 0.42 and 0.92 both soles are above y=0.12. If IK is unstable, keep the keys and add an ankle correction that passes the same test: at phase 0.08 the stance sole is within 0.01 m of y=0 and within 0.03 m in Z of its landing dash.

Hair locks and the tie store a quaternion. Each frame, slerp it toward the parent world quaternion by 1-exp(-k * dtScaled), k=10 for hair and k=6 for the tie, and clamp the angle to 26 degrees for hair and 34 degrees for the tie. They must trail the hips and never flip over the head.

Renderer: antialias on, ACESFilmic tone mapping, exposure 1.08, output color space sRGB, pixel ratio capped at 1.75. Pause the render loop when the document is hidden. Camera fov 30, OrbitControls target (0, 1.02, 0), damping on, min distance 2.6, max distance 7.5, polar angle limited from 0.55 to 1.55 so the camera cannot go under the floor. Presets: Three-quarter (1.9, 1.25, 3.6), Side (3.4, 1.05, 0.15), Low (1.2, 0.45, 3.2), all looking at the target. Lerp 480ms. One finger orbits and pinch zooms on touch. If WebGL is missing, hide the canvas and show four code-drawn side-view figures (ellipses and rounded rects in the same colors) for contact, recoil, passing and flight; the scrubber highlights the active one. No loading screen and no error string.
   Motion: Phase advances at 1/0.80 per second at 1x, and at 0.35/0.80 at slow motion. Pause freezes the clock; scrubbing still sets the phase. Springs and the lane use the same scaled clock, so slow motion also shows the hair lag. Reduced motion starts paused at phase 0, snaps springs to the parent, and cuts between camera presets. The play button still runs the cycle after an explicit press. There is no bloom, no autorotate, and no camera move on load.
3. **Transport dock** — Play button reads Pause while the cycle runs and Play while it is paused. It starts as Pause. Speed buttons: 1x and 0.35x. 1x is selected on load. Scrubber label is the phase to two decimals, such as 0.42, then the active foot, such as Left foot. Camera buttons: Three-quarter (selected on load), Side, and Low.
   Layout: Desktop dock: absolute, left 16px, right 352px, bottom 16px, height 84px, background #FFFCF8, 1px border #E4D8C8, radius 2px, padding 12px 16px, flex row, align center, gap 12px, z-index above the canvas. Order: 44px play button, a segmented 1x / 0.35x control, a flexible range input, the mono readout, then the three camera buttons. The range goes from 0 to 1 with step 0.001. Track 6px #E4D8C8, filled portion #E25B2A, thumb 16px #FFFCF8 with a 2px #E25B2A ring. Eight ticks at 0, 0.12, 0.28, 0.42, 0.50, 0.62, 0.78 and 0.92. Tick labels, 10px Figtree, #6B645C, read Contact, Recoil, Pass, Flight, Contact, Recoil, Pass, Flight. The active tick label is #E25B2A. Play and the selected speed and camera use background #E25B2A and text #FFFCF8. Unselected buttons are #FFFCF8 with a 1px #E4D8C8 border and #1C1917 text. Buttons are at least 44px tall. The readout is IBM Plex Mono 500 at 13px. aria-valuetext on the range names the phase and the foot, for example Contact, left foot, 0.08. Space toggles play unless focus is in the range. Arrow keys on the range step by 0.01. Dragging the camera clears the selected preset until a preset is clicked again. Mobile: the dock is not overlaid. It wraps to two rows, play and speed and cameras on the first, the full-width scrubber on the second. Hide the tick words under 800px and keep the ticks.
   Motion: Dragging the scrubber sets the phase on input, with no extra delay. Preset changes lerp the camera over 480ms unless reduced motion is set, in which case the camera cuts. Selecting a speed does not reset the phase.
4. **Phase rail** — Title: One stride, eight marks. Dek: Left foot from 0.00 to 0.50, then the right foot repeats the same four shapes. Stat line: Ground speed 2 m/s · Cycle 0.80 s. A small label above the cards reads Left foot when phase is below 0.50 and Right foot otherwise. Cards: Contact — The lead foot meets the floor and the hips sit forward of the chest twist. The opposite arm is back. Watch the shoe land on a dash and leave with that dash. Recoil — The landing knee bends and the hips reach their lowest point. The free heel lifts toward the hip. The head barely moves. Passing — The free knee drives ahead while the stance leg lengthens behind. The thighs pass. The body is rising. Flight — Both shoes are off the floor and the hips are highest. The stride is open. The hair locks and the waist tie are still behind the turn of the hips. Hair swatches, in order, with the first selected: Ink #1B3A4B, Wheat #E6D3A1, Soot #242220, Pine #2C6B56, Rose #D9897A. Uniform swatches, Marigold selected: Marigold #E2A322, Cobalt #1F4E8C, Spruce #1E7A62, Coral #E36B58, Chalk #F4F0E6. Rail footer: [BRAND] · [STUDIO_ADDRESS], then the [CREDIT] link.
   Layout: Right column, 336px, background #FFFCF8, 1px left border #E4D8C8, padding 20px, flex column, gap 12px. Title Fraunces 500 at 26px, line-height 1.15. Dek and cards in Figtree 400 at 14px, line-height 1.45, color #1C1917 for the card title and #6B645C for the body. Stat line IBM Plex Mono 400 at 12px, #6B645C. Each card is a button, text-align left, background transparent, border 0, border-bottom 1px #E4D8C8, padding 12px 8px 12px 12px. The active card has background #FFF6F1 and a 3px left border #E25B2A. Windows: Contact [0.00, 0.12) and [0.50, 0.62); Recoil [0.12, 0.28) and [0.62, 0.78); Passing [0.28, 0.42) and [0.78, 0.92); Flight [0.42, 0.50) and [0.92, 1.00). Clicking a card sets the phase to the start of the current foot's window (0.00 or 0.50 for Contact, and the matching starts for the others) without pausing. Hair and Uniform labels are Figtree 600 at 12px, uppercase, tracking 0.06em, #6B645C. Swatches are 22px circles with a 44px hit area, gap 8px. The selected swatch has a 2px #1C1917 ring offset by 2px and aria-pressed true. Chalk stays visible via a 1px #E4D8C8 border on every swatch. Footer sits at the bottom of the rail, Figtree 400 at 12px, #6B645C, with the credit link in the same size and color #1C1917. On desktop at 900px tall the rail does not scroll; if the column is shorter, the card list scrolls and the pickers plus footer stick. Under 800px the rail is a full-width section under the dock, and the four cards become a horizontal snap scroller with the active card in view. Pickers wrap under the cards.
   Motion: The active card and the foot label update on the same frame as the phase. No scroll-driven animation. When the mobile scroller is showing, the active card scrolls into view only when the window changes, not on every frame.

### [BRAND] — Studio (`studio.html`)
1. **Studio header** — Same header as the viewer: wordmark [BRAND], Viewer, Studio, and the chip Clinic · [CLINIC_PRICE]. Studio is the current page.
   Layout: Identical bar, type, colors and spacing to the viewer header. Studio carries the 2px #E25B2A underline and aria-current=page. Viewer does not. The chip still points at #clinic on this page.
2. **Room introduction** — Heading: A room for one stride. Lede: [BRAND] teaches run timing from [STUDIO_ADDRESS]. [AUDIENCE] sit with a paper chart and the same figure you see here. The runner is [CHARACTER], a [ROLE], built from primitives on the classroom computer. Caption under the live figure: Drag to look. The full controls are on the viewer. The word viewer links to ./index.html.
   Layout: First screen of this page is a two-column grid inside a 1120px column, gap 32px, padding 48px 24px 0. Left column about 46%: the heading in Fraunces 700 at 56px, line-height 1.05, color #1C1917, then the lede in Figtree 400 at 18px, line-height 1.5, max-width 42ch. Right column: the same rig in a 560px-tall frame, radius 2px, 1px border #E4D8C8, autoplaying, orbit and zoom only, no dock and no rail. Default hair Ink and uniform Marigold. The caption sits under the frame, Figtree 14px, #6B645C. On screens under 800px, one column: the live frame comes first at height 70vw with a 420px minimum, then the heading at 36px, then the lede. Reduced motion shows the contact pose paused, with drag still enabled.
   Motion: The embedded cycle uses the same 0.80 second loop. No entrance animation on the heading. Camera drag uses the same OrbitControls limits as the viewer.
3. **Tuesday clinic** — Heading: Four Tuesday nights. Price line: [CLINIC_PRICE] for four evenings, 6:30 to 8:30 pm. Eight seats. Pay at the door. The next group begins on the first Tuesday of the month. Week 1, Contact and recoil: Draw the planted shoe and the bent knee. Mark the lowest hips on your chart. Week 2, Passing: Draw the knees crossing and the arms opposing the legs. Week 3, Flight: Draw both shoes off the lane, and the hair still behind the hips. Week 4, Your chart: Time a 0.80 second cycle on paper, then check it against the viewer with the pause button. Note: Mara Voss took the Tuesday group and left this on a card. Pausing at 0.42 finally showed me both feet off the lane.
   Layout: Section id clinic, padding 56px 24px, max width 1120px, centered. Heading Fraunces 700 at 36px. Price line Figtree 600 at 18px. Four cards in a grid, gap 16px. Each card is background #FFFCF8, 1px border #E4D8C8, radius 2px, padding 16px. A mono week number in #E25B2A, a Fraunces 500 title at 22px, and one Figtree 15px sentence. Desktop four columns. Under 800px, two columns. Under 480px, one column. The note sits under the grid with a 2px left border #E25B2A, padding-left 16px, Figtree 400 italic at 18px, #6B645C. No quotation-mark graphic.
4. **Staff** — Heading: Three people, one rig. Nia Okonkwo, Rig. She sets the bone order and the dark outline shells. A card on her monitor lists every bone from the hips to the two hair locks. Photo public/images/staff-rig.webp, alt: Nia Okonkwo, rig lead, adjusting a wooden figure at a studio table. Ellis Park, Timing. He owns the 0.80 second loop. A pass fails if a shoe crosses a dash instead of riding it. Photo public/images/staff-timing.webp, alt: Ellis Park, timing lead, marking abstract curves on a sheet of paper. June Ibarra, Color. She mixed the plaster backdrop and the five uniform dyes. She will not add a sixth dye until a student can name all four phases. Photo public/images/staff-color.webp, alt: June Ibarra, color lead, standing with unlabeled jars of pigment.
   Layout: The three names and bios above are default copy. If [BRAND] is not the default, invent three new people in the same jobs, rewrite the alts, and keep these three photo files. Padding 8px 24px 56px, max width 1120px. Heading Fraunces 700 at 36px. Three columns, gap 20px. Each column: the photo at 3:4, object-fit cover, width 100%, square corners, 1px border #E4D8C8, then the name in Fraunces 500 at 22px, the job in IBM Plex Mono 500 at 12px uppercase tracking 0.06em color #E25B2A, then the bio in Figtree 400 at 15px, line-height 1.45. Under 800px, one column, photo max width 420px. Do not crop the photos into circles and do not replace them with initials. The photos are never mapped onto the runner.
5. **Visit and questions** — Heading: Visit the room. Body: [STUDIO_ADDRESS], second floor. The buzzer reads [BRAND]. The room is open Tuesday to Thursday, 1 to 6 pm. The evening clinic is Tuesday, 6:30 to 8:30 pm. The viewer on this site is the machine in that room, so the phase you pause here is the phase the class pauses. Second heading: Practical questions. Is there a model file to download? No. [CHARACTER] is spheres, capsules and boxes made when the page opens. Refreshing starts the same loop. Why does the lane move? A planted shoe has to stay on one dash. The dashes travel at 2 meters per second, the same speed as the stance foot. A still floor would make the shoe skate. Can I change the hair and the uniform? Yes. Five hair colors and five uniform colors are on the phase rail. They recolor this rig. They do not change the cut of the singlet, the shorts or the shoes. Do you teach walks or turns? This four-evening group is a run only. The cycle is 0.80 seconds, one full stride, left foot then right.
   Layout: Padding 0 24px 64px, max width 1120px. On desktop, a row: the visit block is 320px, background #FFFCF8, 1px border #E4D8C8, padding 20px, and the questions take the remaining width. Under 800px, visit stacks above the questions. Questions are details elements. Summary is the question, Figtree 600 at 18px, min-height 44px, with a 8px CSS chevron that rotates 90 degrees when open. The answer is Figtree 400 at 16px, #6B645C, padding 0 0 16px. A 1px #E4D8C8 rule separates items. The first question is open. No script is required for the disclosures.
6. **Footer** — [BRAND] · [STUDIO_ADDRESS] · Nothing you change here is saved or uploaded. Then the [CREDIT] link.
   Layout: Full width, border-top 1px #E4D8C8, padding 20px 24px 28px, Figtree 400 at 14px, color #6B645C. The credit link is #1C1917 and sits after the sentence, not in a second brand lockup. Same footer facts already appear in the viewer rail; do not add a third page.

## Assets
- font: Install @fontsource-variable/fraunces, @fontsource-variable/figtree and @fontsource/ibm-plex-mono, all OFL-1.1. Bundle only the Latin files those CSS entry points pull in. Record the packages, licenses and the files used in ASSETS.md. Do not link to a font CDN.
- icon: Draw the header chevrons, the play and pause glyphs, and public/favicon.svg in inline SVG. Favicon is a 14px-style persimmon rounded square with two chevrons on #E25B2A, no letters. The WebGL fallback poses are SVG built in code. No icon package and no brand marks.
- image: Download https://media.vibefather.ai/assets/13f80fd2-c2d1-41fa-9fa5-8416e169d738/staff-rig.webp to public/images/staff-rig.webp. Alt: Nia Okonkwo, rig lead, adjusting a wooden figure at a studio table. Use: staff column, rig. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Credit that sentence in ASSETS.md only, not on the page.
- image: Download https://media.vibefather.ai/assets/13f80fd2-c2d1-41fa-9fa5-8416e169d738/staff-timing.webp to public/images/staff-timing.webp. Alt: Ellis Park, timing lead, marking abstract curves on a sheet of paper. Use: staff column, timing. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Credit that sentence in ASSETS.md only, not on the page.
- image: Download https://media.vibefather.ai/assets/13f80fd2-c2d1-41fa-9fa5-8416e169d738/staff-color.webp to public/images/staff-color.webp. Alt: June Ibarra, color lead, standing with unlabeled jars of pigment. Use: staff column, color. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Credit that sentence in ASSETS.md only, not on the page.

## Don'ts
- Static only. No backend, server code, API routes, database, auth, form posts, third-party APIs, or analytics. The scrubber, colors and camera all work locally.
- npm run build writes a minified dist/ with Vite base ./ and source maps off. Do not copy src/ into dist. Keep dist under 20 MB. Internal links are ./index.html and ./studio.html, never a bare directory.
- No CDN script or stylesheet. Do not load Three.js, OrbitControls, or fonts from jsDelivr, unpkg, Google Fonts, or any other CDN. Self-host Fontsource files.
- All visible copy, labels, alt text and the fallback poses are US English. Keep them in src/content.ts. [ROLE] changes sentences only and must not add a coat, bag, hat, tool, or a different outfit mesh.
- The only product name in the interface is [BRAND]. Do not mention this template's license, price, or member counts. If the prompt has a Credit line, place that single [CREDIT] link in the footer and the viewer rail, and nowhere else.
- Respect prefers-reduced-motion: start paused at the contact pose, snap the hair and the tie, cut camera presets, and disable CSS transitions. Play, scrub and orbit still work after the visitor uses them.
- Must work at 1440x900 and 390x844 with no console errors and no horizontal overflow. Hit targets are at least 44px. The canvas has a descriptive accessible name. Buttons expose pressed state.
- The runner is an original human figure about 7.5 heads tall. Do not add cat ears, animal ears, a tail, a segmented tail, an ahoge, blunt bangs, a fringe over the forehead, or a four-head face. Ears are small human ears.
- Do not dress the runner in an oversized hoodie, sleeve paws, striped track pants, or white shoes with red soles. The uniform is a sleeveless singlet, high-waist shorts, calf sleeves, and charcoal racing flats with stone soles. Arms are bare.
- Hair swatches are only Ink #1B3A4B, Wheat #E6D3A1, Soot #242220, Pine #2C6B56 and Rose #D9897A. Do not use #a15c38 or #8e7cc3. Do not build long segmented hair clumps down the back.
- Do not show a side-by-side comparison, name an AI model as the subject, or display a receipt, a hash, or a repository name. Do not paste another project's prompt, HTML, screenshots, preview gif, contact sheet, or comparison video.
- Do not depict an existing anime or game character, a celebrity, a mascot, a logo, or a brand mark. Do not import glTF, FBX, OBJ, VRM, Mixamo clips, or any avatar. No image texture on the character. The gradient map is a canvas of four pixels.
- Staff photos are only in the studio staff row. Do not hotlink them. No Unsplash, Pexels, Pixabay, Google Images, Simple Icons, brand logos, or CC BY-NC or CC BY-SA files. No placeholder-image service. List every third-party file in ASSETS.md with path, source URL, author and license.
- No commercial fonts. No Aceternity UI, Tailwind Plus, or any restricted component source. No purple gradient, glassmorphism, glow, or emoji icons.
- No SEO block: no meta description, Open Graph, JSON-LD, or sitemap. A plain title of [BRAND] and the favicon are enough. Do not print a calendar date, a year, or a timestamp. Hours stay as weekdays and clock times.
- Do not autorotate the figure, add a loading wall, or shrink the runner to make room for a headline. The first screen of the viewer is the figure. The first screen of the studio page leads with the live frame on mobile.

---
Inspired by Procedural cat-girl run cycle comparison by @NegevTV_ — https://github.com/negevtvx/grok-vs-opus-catgirl-run
— Prompt by VibeFather · https://vibefather.ai/t/anime-character-run-cycle-showcase · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.