YOUR WORKING LIBRARY
Motion, not just notes.
Pick an effect. Try it. Keep what works.
Your original screenshot
My choices
Saved in this browser only. Download the list to bring it to another device or give it to a builder. A saved choice is not client approval.
YOUR FEEDBACK · UPDATED 14 OCTOBER
What we’re keeping.
You like the number reveals and quiet grey/white surface feedback.
FAQ now opens and closes gradually, with adjustable speed. Mouse clicks do not pin it; touch taps and keyboard controls still work. Steam-style arrows now use vector strokes. Your visual approval is still needed.
Motion settings, preview example & your screenshot
“Enable motion for this demo” only appears when your browser reports reduced motion. Medium allows motion; Default stays static. Data-saving mode also keeps motion off. Keep the website readable and usable either way.
Hover-to-play example: a portfolio thumbnail plays a short muted project video while hovered, and pauses on exit. Phones and keyboards get a Play button. Our orbit preview is only animated artwork, not a video.
The speed slider affects FAQ opening/closing and hover transitions, not the fixed-duration number reveal.
Open your unchanged Steam-demo screenshot ↗A still cannot establish animation smoothness or whether the monitor caused the reported roughness.
YOUR LEARNING ROUTE
Learn by doing.
Start with how a website works. Learn the rest alongside real builds—not before you’re allowed to build.
How websites are made
HTML = content and structure. CSS = appearance and layout. JavaScript = behaviour.
Try: pick one demo button. Find its label, its visual style and what happens when you use it.
MDN · Your first website ↗Hosting & publishing
Understand local versus online files, domains, hosting, deployment and HTTPS.
Try: explain how our local preview differs from this hosted, owner-private website.
MDN · Publishing your website ↗Design & usability
Typography, hierarchy, colour, spacing, mobile layouts and accessibility.
Try: look at one saved card. What catches your eye first? Can you find the action and read it on your phone?
web.dev · Learning topics ↗Animations & interactions
Triggers, hover states, easing, sequences and scroll progress.
Try: choose one Anime.js or GSAP effect. Describe what starts it, what changes and how it stops. Check touch and reduced motion.
Anime.js ↗GSAP ↗Codrops · Demos & tutorials ↗Photography
Lighting, exposure, composition, lenses and colour.
Try: study one real food photograph. Notice the direction of the light, background, crop and main subject.
Cambridge in Colour · Tutorials ↗Video & AI-assisted media
Framing, shot sequences, editing, sound and continuity—then generation and refinement.
Try: outline a short project preview. Check whether every shot is consistent and whether generated content contains artefacts. Keep real business evidence authentic.
Adobe · Video editing lessons ↗Adobe · AI media lessons ↗
A topic map, not a completed course or a new subscription. Source indexes checked 12 October 2026; linked lessons and videos have not all been reviewed. Course access and tool costs vary.
Already-made animation libraries
Reusable code is different from inspiration. Use the smallest tool that fits.
Updated 28 October 2026: seven animation source collections retained, with local previews where labelled. GSAP is free under its own standard licence, not MIT. Downloading a source pack does not install its dependencies or approve a client design. Codrops remains a discovery catalogue; individual demo terms apply.
Your saved motion notes
Automatically indexed from the local Motion folder when we rebuild. Not automatic chat ingestion or continuous PC sync.