Ely Scroll

---
name: ely-scroll-frontends
description: Design and implement polished frontends driven by sustained scroll animation, including sticky storytelling, scrubbed typography, masks, galleries, layered scenes, and product reveals. Use for scroll-led landing pages, interactive portfolios, and scroll animation demos.
---

# Ely Scroll

Turn scrolling into a continuous visual story with a clear purpose, readable content, and normal browser navigation. Preserve the user's framework, visual direction, audience, language, and requested scope.

## Design the sequence

Start with what each scene must communicate and what the visitor can do afterward. Choose a visual direction through typography, composition, material, and color before choosing motion. Adapt to the existing project rather than replacing its stack.

A **sequence** is one coherent transformation sustained across a substantial stretch of scroll. A heading fade, a card reveal, and its stagger do not count as three distinct sequences. When several animation types are requested, give each a different dominant spatial behavior and a visible beginning, development, and resolved end. Microinteractions support those sequences; they do not satisfy the count.

For each sequence, decide its content, motion mechanism, start/end composition, mobile variant, and static alternative. Roughly 240–360svh is a useful starting point for a pinned scene, not a quota: shorten empty travel and extend only when the story needs it. Avoid leaving an empty frame at either boundary. Between elaborate scenes, use deliberate changes in rhythm and enough visual rest to make the motion legible.

Read [references/patterns.md](references/patterns.md) to select or implement a pattern. It offers ten distinct patterns, not a mandatory page structure. Prefer a small number used well over an unrelated collection of effects.

## Build dependable motion

- Keep wheel, touch, keyboard, and anchor scrolling native. Do not intercept input to move between scenes, lock body scrolling, or force a smooth-scroll dependency.
- Use one normalized progress value per scene: `clamp((scrollY - sceneTop) / (sceneHeight - pinHeight), 0, 1)`. Derive timed phases from it. Updates must scrub correctly in both directions and work when loading halfway down a page.
- Use the project's existing animation system when it fits. Native sticky positioning plus a small requestAnimationFrame driver is a suitable default; an established timeline library is also valid. Avoid adding a large dependency for a handful of transforms.
- Keep document flow stable. Position layers inside a containing pin, size media before loading, and put overflow clipping on inner artwork rather than an ancestor that breaks sticky behavior. Use `svh` for stable viewport scenes and `clamp()` for responsive sizes.
- Read layout in a measurement pass; write transforms, opacity, or CSS variables in an animation pass. Recompute distances after relevant resizes, font loading, or content changes. Animate actual horizontal overflow, not a guessed desktop distance.
- Favor transforms and opacity. Use masks, filters, canvas, and SVG effects when they visibly justify their cost; inspect their behavior on mobile. Apply `will-change` sparingly to the currently active artwork, not to the whole page.
- Give each component ownership of its listeners, observers, animation frames, and animation instances; remove them on unmount. Test remounts if the framework does them during development.

For a dependency-free starting point, adapt [assets/scroll-timeline.mjs](assets/scroll-timeline.mjs) with [assets/scroll-scene.css](assets/scroll-scene.css). Read [references/engine.md](references/engine.md) for its contract and framework lifecycle usage. These assets are optional; do not replace a working project engine without a reason.

## Make the static page first-class

Use semantic document order and real text. Keep headings, links, controls, and meaningful visual explanations accessible throughout the sequence. Decorative duplicates are `aria-hidden`; do not hide the only readable copy behind a mask. Decorative moving layers should not intercept pointer events. A navigation link must land somewhere understandable, including when deep-linked.

The base HTML/CSS must contain a readable layout before enhancement. Under `prefers-reduced-motion: reduce`, remove sticky travel and large transforms, show every meaningful layer in normal flow, and preserve access to content and actions. Do not simply freeze a complex sequence at progress 0 or 1 when that conceals earlier content. If desktop choreography becomes cramped on mobile, simplify its composition while retaining its message; do not shrink an entire desktop scene to fit.

## Deliver evidence

Read [references/qa.md](references/qa.md) before finishing. Inspect the real browser at the start, middle, and end of each sequence, then verify narrow screens and reduced motion. Fix actual overflow, clipping, inaccessible actions, blank pauses, and sticky boundaries. Report what was checked and any remaining limitation without inventing performance scores, conversions, testimonials, or device coverage.

When asked for examples, label them by motion mechanism and let visitors reach each directly. When asked for a showcase landing, integrate the requested number into the landing's main story; do not substitute a grid of previews. Keep downloads, installation instructions, and calls to action honest and functional. Publishing or changing a custom domain follows the user's actual deployment authorization, not an assumption created by this skill.