# Default motion for new standalone sites

Read this when creating a new standalone `hosting` site. Default to a distinctive visual
concept with Three.js and GSAP, inferred from the brief without another design questionnaire.
Explicit brand direction and requests for quiet or animation-free designs override this default.
Existing sites retain their visual system; CMS companion pages do not require a 3D hero.

## Compose before animating

Choose a palette, responsive display type, section rhythm, and a visual idea related to the
organization. Use larger headlines and varied compositions where appropriate. Replace old
template instructions imposing a 32px maximum or a universally restrained editorial style.
Keep body copy readable and factual; animation does not justify invented business claims.

Include one custom Three.js hero scene, a coordinated GSAP hero entrance, two or three
scroll-triggered section sequences when the page has enough sections, and useful hover/focus
states. Adapt a scene preset's forms, colors, materials, composition, and motion to the brief:
sculptural geometry for a creative business, connected forms for a network or software product,
or layered terrain for an outdoors organization are starting points, not mandatory categories.
Avoid giving every site the same spinning object. Use natural scrolling and keep the main
heading and call to action available immediately.

## Template implementation

The official `answer-cloud/answer_cloud_template` starter supplies:

- `src/components/HeroScene.astro`: a decorative canvas, static SVG fallback, and pause control.
- `src/components/SiteMotion.astro` and `src/scripts/motion.ts`: scoped GSAP entrances and
  ScrollTrigger sequences using `data-hero-reveal` and `data-reveal` attributes.
- `src/scripts/hero-scene.ts`: lightweight `sculpture`, `network`, and `landscape` scene presets.
- `src/styles/tokens.css`: display typography and shared motion tokens.

Wrap page content in `SiteMotion`, place `HeroScene` beside real HTML hero content, and mark
only selected elements for animation. Replace the showcase with the customer's pages. Keep
scene controls and fallback artwork visually matched to the site. Do not animate the platform
chat iframe or launcher with broad selectors.

Older template copies may lack these components. Implement the same contract locally and
install `three` and `gsap` with exact versions, retaining the lockfile. Do not wait for a
template update or silently omit the requested motion. Use Astro-bundled browser scripts;
do not import browser-only code in Astro frontmatter or add a React runtime just for animation.
Load Three.js with a dynamic import after the HTML has rendered and the scene is near the
viewport. Import only GSAP core and required plugins. Avoid remote runtime CDN dependencies.

## Runtime contract

- Content, navigation, and calls to action exist in initial HTML and work without JavaScript.
  Default CSS must not hide reveal targets. Only successful animation initialization may
  temporarily change their styles; failed initialization restores visible content.
- The hero reserves its dimensions and displays an attractive static SVG/CSS/image fallback
  until the first successful WebGL frame. Unsupported WebGL, context loss, or failed imports
  leave the fallback visible. Decorative canvases are hidden from assistive technology and
  do not intercept clicks on page controls.
- Reduced motion skips the 3D import and movement, including after a live preference change.
  Use `gsap.matchMedia()` for responsive animation and revert styles during cleanup.
- Provide an accessible pause/resume control for continuous ambient motion. Pause GPU work
  offscreen and when the tab is hidden. Stop render loops and remove observers/listeners on
  teardown; dispose geometries, materials, textures, and renderer resources.
- Use simple geometry and limited lights. Cap pixel ratio (start at 1.5), reduce complexity on
  narrow screens, and avoid large external models/textures in the default starter. Keep the
  artifact within the site's plan limit. Three.js must be a separate deferred bundle.
- Animate transforms and opacity selectively. Preserve keyboard focus, readable contrast,
  touch scrolling, and chat usability. Avoid scroll hijacking and loading screens.

## Verification before publication

Build the actual static artifact and inspect it in a browser. Check desktop and narrow mobile
layouts, initial and scrolled states, pause/resume, offscreen pausing, keyboard controls,
reduced motion (including changing it live), WebGL failure, and disabled JavaScript. Verify
real content stays visible, links work, and scene failure does not break the page. Check console
errors, deferred bundle requests, layout stability, and loading performance. Record measured
results rather than claiming a performance score that was not measured. Fix defects locally
before spending a deployment attempt; report states the available tools could not verify.

After an authorized deploy, repeat the main desktop/mobile checks with the injected chat.
The existing source, social preview, AEO, and chat completion gates still apply.

## Maintenance references

- [Astro browser scripts](https://docs.astro.build/en/guides/client-side-scripts/)
- [GSAP media queries and cleanup](https://gsap.com/docs/v3/GSAP/gsap.matchMedia/)
- [Three.js resource cleanup](https://threejs.org/manual/pages/cleanup.html)

Keep package license notices in redistributed code. The GSAP runtime here animates generated
websites; adding a visual animation editor is a separate product decision requiring review of
the [current GSAP terms](https://webflow.com/legal/product-terms).

Workflow version: launch-f4679309a5dc7dc7