# Default motion for new standalone sites

Read this when creating a new standalone `hosting` site. The primary official template is
SaaaaS: lightweight CSS hero entrances, deferred GSAP/ScrollTrigger reveals, a polished static
hero product illustration, and a three-layer Aurora gradient. Adapt the concept and palette
to the brief without another design questionnaire. Explicit branding and requests for quiet
or animation-free designs override these defaults. Existing sites retain their visual system;
CMS companion pages do not acquire decorative motion by default.

## Compose before animating

Choose responsive typography, section rhythm, and imagery suited to the organization. The
SaaaaS tokens provide a starting scale, not a universal 32px type cap. Keep body copy readable
and factual; animation does not justify invented business claims. Replace sample product data
and copy with appropriate site content. Keep static illustrations as illustrations rather
than adding simulated interactive controls.

Use natural scrolling and keep the main headline visible from first paint. Stagger short
supporting-copy and action entrances without hiding essential content. Keep entrance transforms
separate from the workspace's scroll drift. Keyboard focus should complete entrances immediately
without replaying them when focus moves away.

## Primary template implementation

The root of `answer-cloud/answer_cloud_template` supplies:

- `src/layouts/SiteLayout.astro`: static page shell and shared motion boundary.
- `src/components/SiteMotion.astro` and `src/scripts/motion.ts`: deferred, scoped GSAP reveals,
  groups and workspace drift using `data-reveal`, `data-reveal-group`, and `data-scroll-drift`.
- `src/components/GradientBackdrop.astro`: three overlapping mint/blue/lilac Aurora layers,
  continuous transform loops, a pause control, and visibility/preference lifecycle handling.
- `src/components/Workspace.astro` and `src/styles/workspace.css`: a static product illustration
  with a concise accessible image description.
- `src/styles/home.css`: CSS hero entrances and composited gradient motion.
- `src/styles/tokens.css`: shared typography, color, and motion tokens.

Reuse these components and hooks where the site needs motion. Retokenize the palette and adapt
illustrations to the brief. Replace the showcase with the customer's actual pages. Keep animated
decorative layers separate from text and real controls. Do not animate the platform chat iframe
or launcher with broad selectors.

Use Astro-bundled browser scripts and retain the lockfile. Do not import browser-only animation
code in Astro frontmatter or add a UI runtime solely for animation. Keep GSAP off the initial
critical rendering path: load it after the page has loaded and the browser is idle, or on user
intent after load. Reduced-motion users skip that import. Import only required GSAP plugins;
avoid remote runtime CDN dependencies.

## Runtime contract

- Content, navigation, and calls to action exist in initial HTML and work without JavaScript.
  The headline is visible from first paint. Failed animation initialization leaves content
  readable; static CSS remains the baseline for content that depends on the deferred module.
- CSS entrances reserve their final layout space. Animate transforms and opacity selectively;
  never make keyboard targets unusable while they arrive.
- Ambient gradients move clipped decorative layers through continuous loops using transforms.
  Text and the product frame remain sharp and stable. Provide an accessible pause/resume control.
- Pause ambient work outside the viewport and while the tab is hidden. Honor reduced motion
  on initial load and live preference changes. Stop work and remove observers/listeners on
  teardown; restore safely after back/forward-cache navigation.
- Use `gsap.matchMedia()` for responsive scroll motion and revert styles during cleanup.
  Preserve keyboard focus, readable contrast, native touch scrolling, and chat usability.
  Avoid scroll hijacking and loading screens.

## Optional custom 3D

The previous Three.js implementation is preserved under `archive/classic/`; it is not part of
the active starter. Use it only as an optional reference when the brief calls for a 3D scene.
Do not copy its old project instructions or restore its Three.js requirement as the default.
Adapt the geometry, materials, colors, composition, and motion to the site rather than giving
every website the same spinning object.

For a requested 3D scene, bundle `three` separately and load it only after static content has
rendered and the scene is near the viewport. Reserve the scene's dimensions, hide decorative
canvases from assistive technology, and preserve an attractive static SVG/CSS/image fallback
for unavailable WebGL, context loss, and failed imports. Reduced motion skips the 3D import.
Provide pause/resume, offscreen and hidden-tab pausing, and lifecycle cleanup. Dispose geometry,
materials, textures, and renderer resources; limit pixel ratio and mobile complexity. Retain
package versions and license notices. WebGL verification applies only to designs using WebGL.

## Verification before publication

Build the actual static artifact and inspect desktop and narrow mobile layouts, initial and
scrolled states, keyboard focus, pause/resume, offscreen pausing, reduced motion (including live
changes), and disabled JavaScript. Verify real content stays visible and links work. Check
console errors, deferred bundle requests, layout stability, and loading performance. For a
requested WebGL scene, also check unavailable WebGL and context loss. 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) for optional 3D.

Keep package license notices in redistributed code. The GSAP runtime 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-c517403fa2f3e681