cinematic-gsap-lenis
Smooth scroll, masked line and word reveals, layered parallax, magnetic buttons, a lagging cursor. All of it is live in this hero.
MengTo / Skills — 123 skills, five taken
Five scroll skills. Built once each. Running on this page.
Every section below is the real implementation of one skill, taken from its own SKILL.md and built against ANC brand. Nothing here is a screenshot.
cinematic-scroll-storytelling
Preloader handoff, split-text beats, a sticky card stack that recedes, a footer that arrives on a parallax.
gsap-scrolltrigger-storytelling
One pinned artifact, a scrubbed timeline, layers arriving in measured steps. Built here as an LED spec frame.
scroll-world · threejs-scroll-worlds
The mode decision, then the real-time bowl. Both modes of the same family, side by side.
01 — WEB DESIGN
cinematic-gsap-lenis-motion-system
One motion language rather than a pile of separate animations. Lenis drives its RAF through the GSAP ticker so smooth scroll and ScrollTrigger never drift apart — that single detail is what most hand-rolled versions get wrong. The hero above is the skill running unmodified.
- Reveal duration
- 0.75 – 1.1s
- Word stagger
- 0.035 – 0.07s
- Line stagger
- 0.08 – 0.14s
- Cursor lag
- 0.25 – 0.45s
- Scroll scrub
- 0.8 – 1.4
- Pin handoff
- anticipatePin: 1
Where it lands at ANC: this is a straight upgrade to the kinetic-pages and cinematic-landing skills — the two that produce client-facing pages. It replaces ad-hoc per-page animation with one token set applied everywhere.
02 — WEB DESIGN
cinematic-scroll-storytelling
The page-anatomy skill: preloader, hero, kinetic intro, story sections, sticky project stack, gallery, footer handoff. Its signature move is the sticky card stack — earlier cards scale down and dim as the next one arrives, so depth comes from scroll position rather than a transition.
Cards do not transition. They recede.
Each card is sticky at 13vh. A ScrollTrigger keyed to the next card scales this one to 0.92 and drops it to 72% opacity as that card climbs into place. Scroll back up and it returns exactly — the state is scroll position, not a played animation.
The layout is CSS. Only depth is GSAP.
Sticky positioning does the stacking with no JavaScript at all, which is why the page still reads correctly with scripts blocked. GSAP is layered on top purely for the scale-and-dim, and it is skipped entirely under reduced motion.
Where this replaces a Digideck slide.
A proposal that currently reads as four stacked sections becomes four cards a client scrolls through on one link. Same content, one page, no deck software — and it fits the "must fit on a screen" complaint without cutting a single fact.
The trap the skill calls out.
Sticky cards that overlap the footer trap the reader and the page reads as broken. The stack needs a hard end and the footer needs its own parallax handoff — which is what happens at the bottom of this page.
03 — WEB DESIGN
gsap-scrolltrigger-storytelling
Sticky product storytelling, which is a different job from editorial. One artifact stays pinned while the narrative updates around it in measured steps: frames draw in, controls fade up, values count, regions highlight. Scroll below and the LED spec frame builds itself.
Beat 01 — the artifact
Pin it, then narrate.
The frame stays fixed for the whole scene. Everything that follows is a state change on the same object, not a new section.
Beat 02 — the sweep
One render output, 3840 wide.
The pass across the canvas is the render output being filled. It is a state, so scrubbing backwards empties it again.
Beat 03 — the layers
Ribbons strip, they don't tile.
Four stripes stack onto one canvas instead of claiming four outputs each. Layers arrive one at a time with a shared easing language.
Beat 04 — the proof
Numbers count up last.
The readout is the payoff of the scene, so it arrives after the visual has finished explaining itself — never at the same time.
4 stripes stacked · 1 output
- Stripes
- 0
- Outputs
- 0
- Matrix
- 0
- Canvas fill
- 0
Where it lands at ANC: this is the shape a product explainer should take — the LiveSync calculator, the CRM upgrade page, a walkthrough that currently needs a video. One artifact, narrated, scrubbable in both directions.
04 — WEB DESIGN
scroll-world-storytelling
This one is a decision procedure before it is a renderer. It forces a story map of 5–7 beats and a style bible, then makes you commit to exactly one of three modes — and explicitly forbids mixing them, because a focused renderer gives a smaller test surface and a real fallback.
Video scrub
Generated or filmed footage mapped to scroll. Exact art direction, photographic finish — at the cost of heavy assets and seek tuning.
Not chosen hereHTML / data / type
Semantic DOM, SVG charts, metrics, kinetic type. Accessible, crisp, lightweight, content-first. The skill says prefer it when the story is mostly proof and numbers.
◆ Chosen for this sectionThree.js world
A real-time object, place or system. Real depth and responsive camera control, paid for in WebGL performance and fallback work.
Demonstrated in 05 belowWhat the five skills actually cost
Scroll drives one normalized value — every bar reads from it
Counts read from the repository at commit fetched 2026-08-26: 19 Codex workflows, 2 media, 1 UI, 20 game development, 81 web design. The two media skills source stock imagery and are barred by the ANC visual content rule.
Beat 01. The bars are not animating on a timer. They are reading a single scroll value between 0 and 1.
Beat 02. Scroll back up and they retract. State is position, so the story is reversible.
Beat 03. Every number stays selectable text. A screen reader gets the table, not a canvas.
Beat 04. This mode is the right one for a report, a pipeline number, a margin story — most of what ANC ships.
05 — WEB DESIGN
build-threejs-scroll-worlds
One persistent world, one normalized reversible scroll state. Not a scene per section — the renderer, the scene graph and the geometry stay alive while the camera, fog, lights and copy move through authored chapters. Below is an ANC bowl: five chapters, camera endpoints stored as data, everything between them interpolated.
Real-time world
Starting the renderer. If WebGL is unavailable this poster stays, and the chapter copy below it still reads in document order.
Chapter 01
Approach
The bowl from outside, in haze.
chapter 0.00
fov 0 · fog 0
0 fps · 0 draw calls
VERDICT
What to take and what to leave
123 skills, 5,431 stars, last pushed 18 August 2026. Actively maintained and genuinely well written — the specs carry real numbers rather than adjectives, which is what makes them usable by an agent. The value is concentrated in a small slice.
Take — these five
All five are on this page. They are direct upgrades to kinetic-pages, scroll-world and cinematic-landing — the three that produce client-facing pages.
Take — the utilities
video-to-superprompt turns a screen recording into a recreation spec. Plus stitched-full-page-capture, browser-video-recording, optimize-web-animations, performance-profiling.
Leave — 20 game skills
Isometric ARPG, combat tuning, enemy AI, inventory, monster systems. No ANC surface touches any of it.
Leave — ~50 style presets
orange-clean-paper-saas, funky-purple-container-tech and friends. Installing them makes an ANC page look like every other Awwwards clone. The brand kit already owns palette and mark.
Bar — 2 media skills
unsplash-asset-images and aura-asset-images source stock photography. An agent carrying those will silently drop stock into a client deliverable, which the ANC visual content rule forbids outright.
Never clone all 123
The skill listing is already around 400 entries. Adding 123 more degrades routing in every session, on every project, for the sake of a dozen useful files.