10-second example rendered by this skill from examples/nocturne · 1280×720
About this skill
An animated website hero with a travel-poster map beside the headline. As the visitor scrolls, the hero pins and the route draws itself station by station. Lamps pop on, names light up, a ticket stub shows where the journey is now and its counters run up. You give it your stations, colours, fonts, logo and words. It builds one self-contained page plus a paste-in embed and checks it at four widths. It also records a smooth 1080p video of the same scroll story for launch posts.
Lookbook wrote this package from scratch, following the open-source GSAP ScrollTrigger agent skill (greensock/gsap-skills, MIT): pinning, a scrubbed timeline and a path drawn on with scroll. GSAP itself is not used: native sticky pinning and a hand-drawn canvas. Credits and licences for the open-source software and fonts it uses are in NOTICE.md inside the download.
Example request
Make a Scroll Route hero for Nocturne, our night train from Lisbon to Tallinn: eight stops with their times, 3,480 km and 59 hours on the ticket stub, cream, deep teal and mustard, and a 'Choose a cabin' button. Record a video for the launch post.
Similar Skills
View all
What you get
- A self-contained hero page and a paste-in embed in your colours, fonts, logo and copy
- A route map of 3 to 9 stations that draws itself as the visitor scrolls, with up to three counters that run up
- Station names placed automatically to stay off the line, or by hand
- A frame-perfect 1080p MP4 and a poster of the same scripted scroll, the same on any machine
- A still map for reduced motion and when scripts fail, plus checks at four widths for overflow, contrast and accessibility
- Open-source licenses for every part it builds on
Good fit
- Product launch
- Brand
- Social media
Not for
- Real geographic maps, live tracking or routes drawn to scale
- Heroes that sit inside a scrolling panel or an iframe (use drive "time" there)
- Routes with more than nine stops
Compatibility
Runs in
Generates with
Last tested Oct 25, 2026 in Claude Code, Codex, Cursor. Commercial use of everything you make is included.
Reviews
No reviews yet. People who install this skill can leave the first one.
FAQ
Which agents can run Scroll Route Hero?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Do I own what I make with it?
Yes. Everything your agent makes with this skill is yours, including for client and commercial work.
What if it doesn’t work for me?
Tell us within 7 days of buying and we’ll fix it or refund you.