A landing page you watch like a film, for a motion graphics app on its way
As you scroll, the ball from the logo bounces, drops into the week of someone who makes videos and shows what changes with Animatio. Anyone who wants to know when it's out leaves an email, with double opt-in.
- Client
- M's Works
- Sector
- Motion graphics software · Palermo, Italy
- Services
- Web & App Development · UI/UX & Design System · GDPR & Privacy
- Online
- animatio.app ↗
The context
Animatio is M's Works' desktop motion graphics app, with an AI assistant inside the editor: it learns the brand and prepares formats, subtitles, voice and music. M's Works uses it every week for its own videos, but it isn't on sale yet. It needed a website to present it before launch, with no download and no date, and a way to be notified. The starting point was an approved animated draft, laid out at fixed sizes for desktop (1440 × 900) and phone (390 × 844), and a defined brand identity: colours, typefaces, motion curves.
The problem
Telling the story of an app nobody can download yet, without real screenshots or a video.
Bringing a fixed-size animated draft to the web without losing the motion on different screens.
Scroll-linked animations aren't in every browser: Firefox doesn't have them.
Collecting the emails of people who want to be told, with consent that holds up and no sign-ups made by bots.
An animated film has to stay readable for people who reduce motion or zoom in.
Every choice has a constraint behind it
The constraint
The draft's scenes move with CSS scroll-driven animations: Chrome, Edge and Safari 26 support them, Firefox doesn't.
The choice
Animations written in CSS and left to the browser. Where they're missing, a small script moves the same animations to the right point of the scroll.
Why
A library like GSAP ScrollTrigger would have redone the motion in JavaScript even where the browser handles it on its own, off the main thread, and a polyfill was one more dependency. Our own fallback reuses the same CSS curves and keyframes: one film to maintain, no library on the site.
The constraint
The approved draft is drawn at fixed sizes, with exact coordinates for trajectories, grids and shapes.
The choice
Two boards per scene, one for desktop and one for phone, scaled to fit the screen.
Why
Rebuilding each scene with a fluid layout meant recalculating trajectories and ranges at every width, and drifting from the approved draft. The trade-off is stated: on screens far from the two formats the board gets smaller, and for zoom there is a reading version in a single column.
The constraint
Spam filters open the links in emails on their own.
The choice
Double opt-in with a button: the link opens a page and the sign-up only counts when a person presses «Confirm». The button works without JavaScript too.
Why
If opening the link confirmed the sign-up, a bot would subscribe people who never asked, and that isn't proof of a person's consent. The same goes for unsubscribing: an automatic click would remove people who want to stay.
The constraint
Out of the box, the translation library stores the language in a cookie and redirects based on the browser's language.
The choice
No cookie and no redirect: Italian lives at /, English at /en, and the reader picks the language.
Why
With the default settings the site would have set a cookie and shown each visitor a different version at the same address. This way the site sets no cookies at all, needs no banner, the cookie policy tells the truth and search engines always find each language at its own address.
What we built
The scroll film
Six scenes, from the bouncing ball to the final call to action, that move as you scroll, in desktop and phone versions.
Token-based design system
Colours, typefaces, spacing and motion curves generated from a single token file, with a page that shows them all.
Double opt-in newsletter
Sign-up confirmed with a button, one-click unsubscribe and automatic clean-up of expired data.
Two languages, legal pages, accessibility
Italian and English, privacy, cookies, terms and an accessibility statement, with a reading version for people who zoom in.
Ready for search engines and AI assistants
Per-page metadata, hreflang, sitemap, structured data and an llms.txt file that says what Animatio is and what it isn't.
The outcome
The site is live at animatio.app, in Italian and English.
Six animated scenes with no animation library.
No cookies and no analytics: the site needs no banner.
Double opt-in sign-up tested end to end in production.
Animations reviewed in an accessibility audit: contrast, reduced motion, zoom and focus fixed.
Technologies
Got a similar project?
Tell us where you're starting from. We'll reply with a clear proposal and realistic timelines, no commitment.