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

# Spinning Hexagon Physics Toy

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

## Brief
Build [BRAND], an original single-page physics playground called [TOY_NAME]. Twenty glossy numbered balls in hot pink, tangerine, lime, cyan and violet move inside a real rotating hexagon on mandatory deep indigo #1B1464. The first screen is the live toy, a concise invitation and a compact tuning lab, with every contact, ball spin and control implemented rather than staged.

- Audience: [AUDIENCE]. The default project gives visitors a short creative break through [EXPERIMENT_THEME]; the alternate case may change that context while using the same physical toy.
- Goal: Make the initial simulation immediately compelling, then let a visitor change gravity, friction, signed wall rotation, ball count, shake and simulation speed to discover different behavior. Preserve the exact palette, geometry, control meanings, fixed stack and arena-first composition when variables change.
- Tone: Tactile, bright, curious and concise. Write friendly US English with concrete action labels. No pseudo-scientific claims, onboarding wall or marketing filler. Default copy appears below; adapt every context-dependent sentence to supplied variable values and keep all content in src/content.ts.

## Stack
- Framework: Vite + TypeScript
- Styling: Vanilla CSS
- Libraries: vite (MIT), typescript (Apache-2.0), @fontsource/fredoka (OFL-1.1), @fontsource/dm-sans (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Create a small vanilla TypeScript application using Vite, with index.html, src/main.ts, src/physics.ts, src/draw.ts, src/content.ts and src/styles.css; do not add React or a component framework.
  - Configure Vite with base: ./, build.outDir: dist and build.sourcemap: false. Set package.json build to tsc --noEmit && vite build so npm run build is the single production command.
  - Keep every English string, variable value, preset label, helper, status message, accessible label and keyboard-help sentence in src/content.ts. Physics and rendering read this content instead of embedding default-brand names.
  - Import only the needed Latin font CSS locally from @fontsource/fredoka at weights 500 and 600 and @fontsource/dm-sans at weights 400, 500 and 700. Vite must bundle the woff2 files with relative URLs.
  - Use CanvasRenderingContext2D for the arena, balls, number badges, original reflections and contact confetti; use ordinary HTML buttons, range inputs and output elements for every control.
  - Implement the solver directly in src/physics.ts using vector math and impulses. No physics engine, graphics engine, worker service, external API, audio library or runtime icon package is necessary.
  - Set an ordinary document title to [BRAND] and draw a tiny original six-sided favicon as a local SVG. The first page is ./index.html and must work from any static subdirectory.
  - Create ASSETS.md listing local font files, their Fontsource package source, their original font authors and OFL-1.1 licenses, plus the original code-drawn arena, icons and favicon. No image generation or third-party artwork is needed.

## Variables
- [BRAND] — Project name (default: "Bounce Break"). An invented name for the project; use it in the header, footer, document title and content configuration.
- [TOY_NAME] — Playground name (default: "Candy Collision Club"). A short name for this specific playground. It appears above the arena and in the accessible scene description.
- [HEADLINE] — Main headline (default: "Give chaos a little spin."). A short invitation of four to eight words; preserve the compact two-line headline layout.
- [AUDIENCE] — Who plays here (default: "curious minds taking a two-minute creative break"). A plain audience description used to rewrite the introduction and experiment descriptions.
- [EXPERIMENT_THEME] — Experiment theme (default: "candy collisions and joyful little surprises"). A subject for all supporting copy and preset explanations. It changes the story, not the fixed arena geometry, numerical physics settings or neon palette.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/spinning-hexagon-physics-toy 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
- Deep indigo `#1B1464` — Mandatory dominant page background, header, footer and right-hand control-card body; never replace with black or a muted neutral. It remains visible around every section.
- Arena indigo `#241B7A` — Arena panel backing and control disclosure backing, distinct from the deep indigo page.
- Inner ink `#130D3F` — Hexagon interior, dark text on all five bright colors, ball number glyphs, slider outlines and solid control-card borders.
- Hot pink `#FF3DA4` — Large clipped upper-left circle behind the arena, one fifth of the balls, selected experiment tab, and the full-width Shake it up button. Pink covers an actual hero surface, not only a small accent.
- Tangerine `#FF8A34` — Large lower-right arena semicircle, one fifth of the balls, gravity-slider fill and action-button pressed state.
- Lime `#C7F43F` — Solid 76px-high Tuning lab card header, one fifth of the balls, active slow-motion pill and friction-slider fill. Dark ink text only.
- Cyan `#25E5F2` — Broad luminous hexagon edge, one fifth of the balls, spin-slider fill, keyboard focus rings and active status dot.
- Violet `#A56BFF` — One fifth of the balls, count-slider fill and the How it moves disclosure label background; use dark ink labels on violet.
- Paper white `#FFFFFF` — Main headings, control labels, readable value outputs, ball-number badge discs and small glossy reflections.
- Lilac text `#DCD6FF` — Secondary body text on the indigo backgrounds; use solid color rather than low-opacity white.

### Typography
- Wordmark, main headline, arena title and large control headings: Fredoka (OFL), weights 500/600
- Body, labels, helper text, statuses and numeric outputs: DM Sans (OFL), weights 400/500/700

### Layout & motion
- Spacing: Use a 4px base grid. Desktop shell max-width 1280px with 32px side padding, 24px workspace gap, 20px card interiors, 16px control gaps and 24px before the explanation/footer band. Header 64px; mobile shell 16px, header 56px, card interiors 16px and gaps 16px. Keep the desktop workbench visible within the 1440x900 first screen and the mobile headline, whole arena and transport visible within 390x844. Avoid giant empty spacer sections.
- Radius: Arena 28px, tuning card 24px, ordinary buttons 14px, preset rows 10px, pills fully rounded. Use solid 2px dark ink outlines and a crisp 8px downward dark ink shadow to give the toy a physical, chunky edge; do not use a glass-dashboard card system.
- Motion: Use requestAnimationFrame rendering with a 1/240-second physics accumulator and adaptive collision microsteps, independent of frame rate. The detailed numerical solver in Interactive candy arena is part of the implementation requirement.
- Motion: Ball numbers and seams rotate with their computed angular state; wall rotation, contact impulses and friction are physical. Keep the five-color gloss legible throughout motion.
- Motion: Energetic contact confetti has a per-contact cooldown, lifetime below 0.4 second and maximum 120 particles. No strobe, full-screen flash, page shake, parallax, autoplay audio or ornamental reveal choreography.
- Motion: Respect prefers-reduced-motion by initially pausing in a polished still state, exposing Start motion and disabling confetti/decorative transitions. Ordinary users start automatically. Pause and Resume always remain available.
- Motion: Buttons have only a 100-120ms color/press response. Native details open immediately. No smooth scroll or press displacement with reduced motion.
- Imagery: Everything is drawn in code: glossy spheres, physical arena, two saturated backing shapes, tiny confetti, original hexagon mark, favicon and simple control symbols. There are no photographs, portraits, bitmaps, imported illustrations, 3D models or generated images. The arena itself is the large high-craft visual anchor; it must show twenty numbered balls clearly on load, not an empty container or static placeholder.

## Pages & Sections
### [BRAND] - [TOY_NAME] (`index.html`)
1. **Header and invitation** — Header left: an original outlined hexagon mark with three candy-colored dots and the [BRAND] wordmark. Header right: the quiet label A pocket-sized physics playground and a How it moves button that opens the explanatory disclosure below the workspace and scrolls it into view. The visible introduction has eyebrow SPIN / BOUNCE / REPEAT, headline [HEADLINE] (default Give chaos a little spin.), and body A candy-colored playground for curious minds taking a two-minute creative break. Twenty little balls. One spinning world. The body must be rewritten from [AUDIENCE] and [EXPERIMENT_THEME] when variables change. The right edge of the intro shows an original five-dot candy swatch and the small label No score. Just play. Do not repeat the template title as the brand.
   Layout: Page background is solid #1B1464. Center a 1280px maximum shell with 32px horizontal padding at 1440px width. Header is 64px tall with white Fredoka wordmark at 24px, cyan outline icon and lilac secondary copy. Intro begins 18px below it; headline is Fredoka 600 at 56px/1.02, maximum 640px, white except the final meaningful word rendered solid #C7F43F. Keep the colored word from [HEADLINE] dynamically rather than hard-coding spin. Body is DM Sans 400 at 16px/1.5, #DCD6FF, maximum 590px. On mobile use 16px shell padding, a 56px header, 21px wordmark, hide the purely decorative header tagline, use a visible 44px How it moves icon/text button and a 36px/1.03 headline. The intro and actual arena must both appear within the first 390x844 viewport.
   Motion: Only button affordances transition over 120ms. No intro fly-in, delayed text reveal, automatic marquee or parallax.
2. **Interactive candy arena** — Arena top strip: [TOY_NAME] on the left, then a cyan dot plus Live, Paused or Reduced motion on the right. The scene is a genuine live Canvas 2D simulation, described by an accessible caption: Twenty glossy numbered balls bounce inside a rotating hexagon. Change the controls to explore candy collisions and joyful little surprises. Rewrite the theme phrase from [EXPERIMENT_THEME]. Draw all twenty numbers, five glossy candy colors and the spinning rim clearly. Put the primary action bar directly under the canvas; exact labels and behavior are defined in Tuning lab and transport. Keep a visually hidden text summary of running state, actual count, spin direction and time factor synchronized without announcing every frame. Implement genuine two-dimensional rigid-disk motion, not a looping animation. Keep the physics in a square world with x rightward, y downward, width and height 1000 world units, arena center C=(500,500), regular-hexagon circumradius 420, equal ball radius r=27, mass m=1 and disk inertia I=0.5*m*r*r. Use the same logical world on every screen; resize only the drawing transform. Default to 20 balls labeled 1 through 20, cycling pink, tangerine, lime, cyan and violet so each color appears four times. Each ball has x/y position, x/y velocity, angular position and angular velocity. The rendered number and a small curved seam rotate with that ball's angular position; the reflection can remain light-fixed. Seed a deterministic PRNG with 137 and place the initial balls in a staggered five-column, four-row cluster near the upper center, with 61-unit center spacing, small nonoverlapping jitter and small varied initial velocities. Check every initial disk against the polygon and the other disks; rejected samples must be retried. The initial hexagon angle is -PI/6 and its default signed angular velocity is +30 degrees per second, meaning clockwise in the canvas coordinates. The initial cluster begins falling on the first rendered frame when ordinary motion is allowed.

Run requestAnimationFrame for rendering and a time accumulator for physics with a base step of 1/240 second. Clamp real frame delta to 0.05 second, limit catch-up to 12 base steps and discard excess lag when the tab resumes instead of advancing a large unsafe jump. Apply slow motion by adding delta*0.25 to the accumulator, never by reducing collision quality. At each base step, subdivide further until the maximum anticipated relative translation of any ball and wall is at most 0.35*r; include max ball speed, abs(arena angular velocity)*420 and gravity in that estimate. Use at most 16 microsteps, with the specified velocity limit below ensuring that this bound remains reachable. Save prior and current positions/angles for smooth rendering interpolation. Pausing freezes balls, wall angle and contact particles; changes to coefficients can still be made while paused. Reset the accumulator whenever pause state or document visibility changes, and suspend updates while the document is hidden.

For every microstep, advance the arena angle by omega*h, compute its six vertices a_i=C+420*(cos(theta+i*PI/3),sin(theta+i*PI/3)), integrate gravity g=(0,900*gravityMultiplier) with semi-implicit Euler, apply exponential air damping exp(-0.10*h) to linear velocity and exp(-0.16*h) to angular velocity, and integrate ball orientation. Use a defensive linear speed cap of 1800 world units/second and angular speed cap of 24 radians/second; these are numerical safeguards, not a substitute for correct collisions. Keep finite-value guards so a malformed state cannot poison the entire canvas.

Solve every unique ball pair and every ball against all six wall half-planes in 8 sequential contact iterations per microstep. For directed edge a to b in this vertex order, e=b-a and the inward unit normal is n=(-e.y,e.x)/length(e). Signed disk-center distance is d=dot(p-a,n). A disk needs d>=r. If d<r, move its center inward by the penetration plus a tiny 0.01-unit margin. Use the nearest point q=p-d*n on the boundary line for the wall's contact velocity, vw=(-omega*(q.y-C.y),omega*(q.x-C.x)), with omega in radians/second. The disk's wall-facing contact offset is rb=-r*n; its contact velocity is v+(-ballOmega*rb.y,ballOmega*rb.x). Compute relative velocity against vw, so a moving wall genuinely gives or takes energy. If vn=dot(relative,n)<0, apply normal impulse jn=-(1+restitution)*vn*m, with wall restitution 0.76 for energetic impacts and restitution 0 when abs(vn)<35, eliminating tiny perpetual bounces. Resolve tangential friction using a tangent t=(-n.y,n.x): jt=-dot(relative,t)/(1/m+cross(rb,t)^2/I), clamped to plus or minus friction*abs(jn). Apply linear impulse (jn*n+jt*t)/m and spin impulse cross(rb,jt*t)/I. Recompute relative contact velocity after the normal impulse. For resting wall contacts, allow the friction limit to use max(abs(jn),m*max(0,-dot(g,n))*h) so the rotating wall still drags a low-speed disk. Restrict confetti to genuinely new, energetic impacts rather than every solver iteration.

For disk pairs, n points from A to B, penetration=2*r-distance. Split positional correction equally, retaining no more than a 0.02-unit contact slop; handle coincident centers using a deterministic nonzero normal. Contact offsets are +r*n on A and -r*n on B. Compute the two contact-point velocities including angular terms. Let relative=contactVelocityB-contactVelocityA; when dot(relative,n)<0 apply the equal-and-opposite normal impulse with inverse-mass sum 2/m and pair restitution 0.80 above the same 35-unit threshold, otherwise 0. Recompute tangential velocity and clamp the tangential impulse to friction times the normal impulse using denominator 2/m+cross(rA,t)^2/I+cross(rB,t)^2/I. Apply equal-and-opposite linear and angular impulses with consistent signs. This must transfer visible spin during glancing contact. When separating a pair, do not apply a new attractive normal impulse. Recheck all wall half-planes after pair correction and finish each microstep with a final inward projection pass, including corners; the visible rim and the physical boundary must be identical. Do not periodically teleport balls back to the center as an escape fix.

Wall and pair contacts whose incoming normal speed exceeds 170 world units/second may emit 3 tiny rectangles in the five palette colors. Store an independent 0.10-second cooldown per contact key, with at most 120 particles alive; each lives 0.18-0.38 second, moves with its own short ballistic arc and fades smoothly. The confetti is an additive garnish at the actual contact point, never a full-screen burst. Report live ball count, rotation direction and simulation speed from actual state; do not invent FPS, energy or scientific measurements.
   Layout: At widths 1100px and above, the workspace is a two-column grid with a flexible arena column and a 328px tuning column, gap 24px; align their tops and make the arena card 592px high. The arena uses #241B7A, a solid 2px #130D3F outline, 28px corners and a crisp 8px lower shadow in #130D3F. A 220px solid #FF3DA4 circle clipped into the upper-left backing and a 260px solid #FF8A34 semicircle clipped into the lower-right backing are large visible surfaces outside the physical hexagon; they never cover the rim, balls, copy or controls. The actual hexagon fills #130D3F at full opacity, with an 8-world-unit #25E5F2 rim, restrained 12-unit cyan glow and a fine white inset edge. Avoid transparency that weakens the colors. The 40px top strip uses white/lilac text, and a 64px action bar sits below the canvas. The canvas fills the remaining height and its drawing transform uses scale=min(cssWidth,cssHeight)/1000 with centered world coordinates, leaving at least 6% padding beyond the rotating circumcircle. Cap devicePixelRatio at 2 and reset the canvas transform after each size change. Ball base colors cycle through the five exact hues; add a darker lower crescent and small white specular ellipse, then a white central number disc with #130D3F Fredoka 600 numerals at 30 world units. All ball surfaces and number discs rotate together except the light-fixed highlights. Use a soft small contact shadow instead of blur over the numbers. On 760-1099px use a flexible arena and 300px control panel, with minimum stage height 530px. At 759px and below stack the cards; arena card is approximately 424px high at 390px width, with 32px top strip, 326px canvas area and 64px action bar. The scene must stay fully visible without clipping any hex vertex at every rotation angle. The mobile render keeps the same world physics, radius and palette rather than using a smaller physical arena.
   Motion: The physical wall and number seams rotate at their actual solved angles. Keep continuous rendering smooth, with no CSS oscillation substituting for simulation. Confetti appears only on energetic contacts, with a 120-particle ceiling and smooth fade. The page and canvas backing never shake or flash. Under prefers-reduced-motion, render a polished still arrangement on load, set status Reduced motion, disable confetti and decorative motion, and show an explicit Start motion button; only an intentional click starts physics. After that click keep reduced-motion confetti disabled. The user can Pause at any moment.
3. **Tuning lab and transport** — The side panel is titled Tuning lab and has helper copy Make a tiny change. Watch a different world. Use four labeled native range controls with persistent associated output values: Gravity is 0.00x-2.00x in steps of 0.05x, default 1.00x, multiplied by 900 world units/second squared; its helper is Pull toward the floor. Friction is 0.00-0.80 in steps of 0.01, default 0.18, used as the Coulomb coefficient at wall and pair contacts; helper Slippery to grippy. Spin is -120 to +120 degrees/second in steps of 5, default +30; display 30 degrees/s clockwise, 0 degrees/s stopped or the corresponding counterclockwise value. Balls is an integer 4-40, default 20; helper More company, more collisions. Use a compact minus button and plus button beside the count value as well as the range input; clamp both buttons at the same limits. Gravity, friction and spin changes apply on the next physics microstep without reinitializing ball positions. At zero gravity, moving balls continue with air damping; do not silently re-enable gravity. At zero spin the physical wall stops but balls continue. At friction zero remove contact friction rather than silently retaining it.

Changing the count preserves existing low-numbered balls: remove highest IDs first; add new IDs using up to 250 nonoverlapping sample attempts inside the polygon, with at least 2 units between disks. If necessary spread remaining spawn attempts across the full safely inset arena over later microsteps. Never spawn overlapping disks, place them outside the wall or silently report a requested count that has not yet appeared; show Adding balls while queued spawns remain and then the real total. The accessible count status updates only on a completed count change. Reset clears any pending spawns.

Under the ranges, show three experiment chips, Candy tumble, Float party and Sticky spiral. Candy tumble sets gravity 1.00x, friction 0.18, spin +30 degrees/s and 20 balls; Float party sets 0.20x, 0.06, +45 and 20; Sticky spiral sets 0.70x, 0.55, -55 and 28. Selecting a chip changes those parameters and the count without resetting existing bodies. Highlight a chip only when every current setting equals that preset. Small preset descriptions for the default theme are A cheerful pile-up, Light on their feet and Take the scenic route. Rewrite these names and descriptions for a different [EXPERIMENT_THEME] while preserving these numerical recipes. A Reset toy text button below the chips restores the default numerical recipe, the initial hex angle, deterministic 20-ball cluster, normal speed and empty confetti. Preserve the user's paused/running state and never override a reduced-motion pause. A selected-preset change never silently exits slow motion.

The arena action bar contains Pause, Shake it up and Slow motion. Pause toggles to Resume with an appropriate pressed state. Shake it up gives each existing ball an independently seeded upward impulse of 350-750 units/second, a horizontal impulse of -500 to +500 and angular impulse of -8 to +8 radians/second, clamps to the safety speed limits, and announces Shake added. It does not reset the arena or ball count. If paused, the impulse is stored and takes effect on Resume; the status says Shake ready - resume to release. Slow motion is a toggle between 1.00x and 0.25x simulation time and is labeled Slow motion on when active. An adjacent compact indicator reads 1x time or 0.25x time. No sound is necessary. Include a native details disclosure Keyboard shortcuts with Space: pause or resume, S: shake, M: slow motion, R: reset. Shortcut handlers ignore editable controls, range inputs, contenteditable elements and modified key combinations; focused native inputs keep their browser keyboard behavior. All actions also work with click or tap.
   Layout: Tuning card is 328px wide and 592px tall on desktop, with 24px corners, 2px #130D3F border and the same 8px lower shadow. Its solid #C7F43F header is 76px high, with dark ink Fredoka 600 title at 24px and dark ink helper at 12px. The body is #1B1464 with 20px padding. Place the four controls vertically with 16px gaps; each uses a white 14px bold label left and a tabular white numeric output right, a 6px track inside a 44px-tall input target, a 20px solid bright thumb with dark outline, and #DCD6FF helper at 12px. Use tangerine, lime, cyan and violet fills for gravity, friction, spin and count respectively. Never use low-opacity neon for body text. Presets are three compact stacked rows with 36px minimum visible height and 44px target height; selected row is solid hot pink with dark ink text and a check icon; other rows have a thin cyan outline and white labels. Reset is a 44px text-button row. Arena action bar has three controls: Pause as a 44px white-outlined indigo button, Shake it up as the visually largest 44px hot-pink button with dark text, and Slow motion as a 44px indigo pill that turns solid lime with dark text when selected. On mobile use 12px horizontal stage padding, 8px gaps and short visible labels Pause, Shake and Slow 0.25x while retaining the complete accessible names. All three fit the 358px arena width without overflow. At 759px and below the tuning card is full width beneath the arena; use an accessible disclosure summary Tuning lab with the current count and gravity at the right, collapsed initially. Expanding it reveals all controls in normal document flow with no modal or fixed overlay; its header stays solid lime. Desktop shows the tuning body expanded and no disclosure affordance.
   Motion: Slider changes immediately update outputs and the live physics. Native range controls remain keyboard accessible. Buttons use a 2px press translation for 100ms and a visible 3px cyan focus ring with a 3px gap; omit translation for reduced motion. Announce only discrete count, reset, shake and pause events in a polite live region. Avoid frame-by-frame live announcements.
4. **How it moves and footer** — Below the workspace, include a native details block with summary How it moves and the one-line teaser Small rules. Delightful results. Its three concise rows read: Gravity pulls every ball down. Turn it off to watch the wall do the work. / Friction trades sliding for spinning. Look closely: the numbers turn with each ball. / The wall is moving too. A fast edge can give a ball an extra kick. Under those rows use the statement This is a playful model, not a measurement tool. For an educational [EXPERIMENT_THEME], rewrite the teaser and supporting rows around the supplied topic while keeping these physical facts correct. Include the Keyboard shortcuts details block specified above. Footer left: [BRAND]. Footer right: Made for a tiny break. Rewrite that line to match [AUDIENCE] for the alternate topic. A small optional [CREDIT] link can follow the footer when supplied by the surrounding prompt; there is no date, copyright year, external social-link set, registration or newsletter form.
   Layout: Use an uncluttered single horizontal band 24px below the workspace with a thin cyan top border, not a large tutorial section. The How it moves summary is a violet #A56BFF capsule with #130D3F text and an original plus/minus icon; the teaser and expanded explanation text use white and #DCD6FF on #1B1464. Expanded details has a three-column grid of short text at desktop and stacked rows at mobile, with 20px inner gaps and 14px/1.5 DM Sans. Footer is 48px tall with 13px lilac text, left/right aligned at desktop and a two-line flex wrap at mobile. The expanded details grows the page naturally; nothing is hidden behind sticky UI.
   Motion: Details open immediately without a height animation. The header How it moves button sets this details element open, moves keyboard focus to its summary and scrolls it into view using smooth scrolling only when reduced motion is off.

## Assets
- font: Install @fontsource/fredoka locally and import its Latin 500.css and 600.css files; install @fontsource/dm-sans locally and import Latin 400.css, 500.css and 700.css. Bundle only the used woff2 files in dist/ with relative asset paths. Package sources are https://www.npmjs.com/package/@fontsource/fredoka and https://www.npmjs.com/package/@fontsource/dm-sans. Fredoka is by Milena Brandao and DM Sans is by Colophon Foundry, both OFL-1.1. Record actual local paths, original authors, package source URLs and license files in ASSETS.md. Do not use Google Fonts or another remote stylesheet.
- icon: Author minimal inline SVG icons locally for play, pause, shake, reset, plus, minus, check and the six-sided project mark. Use a 24x24 viewBox, rounded 2px strokes and currentColor. Draw a local SVG hexagon favicon at public/favicon.svg. These are original geometric symbols, not copied logo assets. Mark them as locally authored in ASSETS.md.
- image: Generate the arena, glossy balls, white number discs, color backing shapes and tiny contact confetti at runtime in Canvas 2D using the precise palette and geometry above. No downloaded or generated image files are used, so no image URLs or images.json are needed. The canvas needs its descriptive accessible caption in the page.

## Don'ts
- Do not replace the fixed Vite + vanilla TypeScript + Canvas 2D + vanilla CSS stack with React, a graphics engine, a physics engine or a hosted service. Use npm run build and output only static production files in dist/.
- Do not add a backend, server code, API routes, database, authentication, external forms, payments, analytics, telemetry or third-party APIs. All controls operate entirely in memory in the browser.
- Do not use absolute root asset URLs or directory-only internal links. Set Vite base to ./; every internal page link must include ./index.html or another real HTML filename, or a #/ hash route. This toy has one index.html page.
- Do not ship unminified production code, source maps, source source files or src/ inside dist/. Keep the entire dist/ under 20 MB and make it load from an arbitrary static subdirectory.
- Do not load fonts, scripts, styles, images, sounds or icons from CDNs or remote hosts. Self-host only the specified OFL fonts from Fontsource, bundling their woff2 files and licenses locally.
- Do not add npm dependencies outside permissive MIT, ISC, BSD-2-Clause, BSD-3-Clause, Apache-2.0, 0BSD, CC0-1.0, Unlicense or OFL-1.1 for fonts. No restricted UI source, purchased templates, unlicensed code, CC BY-NC or CC BY-SA assets.
- Do not reuse a source-site product name, slogan, wordmark, prompt text, implementation, copy, control composition, screenshot, video, custom typeface or distinctive icon. The arena, art, favicon and interface must be independently authored.
- Do not include real brand logos, recognizable products, real people, recognizable characters, stock photography, remote placeholders, third-party artwork or a 3D engine. This code-drawn toy needs no image-generation step and no images.json.
- Do not leave any third-party font file undocumented. ASSETS.md must list its local path, package source, font author and OFL-1.1 license; mark the original canvas and SVG work as locally authored.
- Do not turn the neon-pop palette into cream, white, gray, black, pastel or low-saturation surfaces. Preserve #1B1464 as the page background and retain #FF3DA4, #FF8A34, #C7F43F, #25E5F2 and #A56BFF in both cases. Hot pink and tangerine must occupy the large arena backing shapes; lime must occupy the tuning header; cyan must outline the physical arena. Strong colors cannot be confined to small buttons.
- Do not use bright colors with white body text, low-opacity body text or a faint disabled/focus state that cannot be read. Use #130D3F text on bright surfaces and white/#DCD6FF on indigo; maintain WCAG AA for normal text and visible focus for every interactive element.
- Do not omit the live arena from the first mobile viewport, hide it behind typography, obscure it with controls, crop a vertex during rotation or let the page overflow horizontally. Verify the full default layout at 1440x900 and 390x844 with zero console errors.
- Do not use a pre-recorded animation, CSS keyframes, per-frame random displacement or a library as the ball physics. Implement all wall/ball and ball/ball impulses, angular effects, friction, gravity, damping and positional correction directly.
- Do not let the rendered hexagon and solver boundary differ. Use the same six world-space vertices, center and angle; use the moving wall contact velocity omega cross (q-C), including sign and radians, for every wall impulse.
- Do not drop or fake the 20 numbered default balls. All integers 1 through 20 must appear once initially, with the five candy colors evenly repeated, glossy shading and real number/seam rotation. Count changes must show exactly the real current count and preserve lower IDs.
- Do not allow balls to escape, tunnel through corners, overlap persistently, sink into a settled pile, acquire NaN state or gain endless resting jitter. Use the fixed time accumulator, adaptive collision microsteps, 8 contact iterations, low-speed restitution threshold, pair correction and final inward wall projection described above. No periodic respawn or center-teleport escape fix.
- Do not advance physics by an unbounded frame delta, lose stability at the maximum signed spin, use slow motion to reduce solver iterations, or run catch-up after a hidden tab returns. Preserve the specified 1/240-second base step, relative-translation microstep bound, safety speed caps and accumulator resets.
- Do not confuse angular speed units or friction signs. Arena controls are degrees per second; solver angular values are radians per second. Contact velocity must include ball angular velocity. Pair impulses must be equal and opposite, and friction must oppose tangential slip.
- Do not apply a collision normal impulse to already separating bodies, use friction zero as a visual-only change, silently re-enable zero gravity, or keep rotating the physical boundary at zero spin. All parameter settings must have real observable effects.
- Do not reset or teleport the ball state when a slider, preset, slow-motion toggle or count changes. Only Reset toy reinitializes the world. Spawn new balls inside the current rotated polygon without overlap; queue an addition transparently if required.
- Do not omit Gravity, Friction, Spin, Balls, Shake, Pause/Resume, Slow motion, presets or Reset toy. The exact ranges, default values and numerical recipes above are required. A selected preset remains selected only while its actual settings match.
- Do not implement Shake as moving the canvas or the whole page. It adds per-ball linear and angular impulses. While paused, store the impulse, report the ready state and wait for Resume. Pause freezes the wall, balls and particles together.
- Do not make tiny confetti into continuous visual noise. Emit only at newly energetic physical contacts, use per-contact cooldowns, cap at 120 active particles, respect lifetime limits and disable confetti completely for reduced motion.
- Do not autoplay physics for users with prefers-reduced-motion. Start in a well-composed still state with an explicit Start motion action and Reduced motion status; only direct user intent may start it, and Pause must remain available. Omit decorative motion and smooth scrolling under that preference.
- Do not rely on hover, drag, keyboard shortcuts or canvas hit targets for essential actions. Every action needs a visible semantic HTML control, associated labels, keyboard access, 44px touch targets and a clear selected/pressed state. Range inputs retain native keyboard behavior.
- Do not intercept shortcuts while focus is in an editable control or a range input. Prevent Space scrolling only when the global pause shortcut actually handles the key. Do not stream physics events into a live region every frame.
- Do not use a modal or fixed tuning overlay on mobile. Keep the arena-first stacked layout, working expandable lime tuning header, responsive canvas backing resolution and all controls in reachable document flow.
- Do not invent FPS, energy, user-count, scientific-accuracy or popularity claims. The visible count, running state, direction and time factor must come from actual simulation state. This is a toy rather than a measurement tool.
- Do not hard-code default-brand words anywhere outside src/content.ts. Apply all supplied variables to header, title, arena caption, intro, preset names/descriptions, explanatory text, footer and accessible labels; rewrite theme-dependent copy coherently while preserving the defined physics and layout.
- Do not show dates, years, countdowns, release timestamps or a front-end copyright year. Keep all visible content, sample text, status labels, alt/accessibility text and variable defaults in US English.
- Do not mention VibeFather in the site itself except an optional [CREDIT] footer link. Do not mention competitors, comparison claims or reference-brand names in the site or product copy.
- Do not add SEO sections, meta descriptions, Open Graph tags, JSON-LD, sitemap work, a newsletter, pricing or a marketing funnel. Use only a plain [BRAND] document title and the original local favicon.
- Do not leave any interaction as a dead decorative control. Before delivery run the production build, inspect the default desktop/mobile views, operate every range at both extremes, test positive/negative/zero spin, switch all presets, reach 40 balls, shake repeatedly, pause/resume, reset and use 0.25x time; watch an extended worst-case simulation to check containment and finite state.
- Do not skip reduced-motion and resize verification: confirm the explicit start state, disabled confetti, preserved state through resizing, functioning mobile disclosure and absence of console errors or horizontal overflow. Fix actual defects before shipping.

---
Inspired by Spinning Hexagon Physics Toy by @GlanceHall — https://glancehall.com/blog/coding-agents/codex-projects
— Prompt by VibeFather · https://vibefather.ai/t/spinning-hexagon-physics-toy · 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.