[ Case study · September 2026 ]
A homepage that tells the whole story.
Crateworks sells windows, doors, cabinets and wall panels to builders. Their old homepage was one photo at the top and a long list of things below it. The new one is a story that plays as you scroll: a different picture for each thing they sell, one after the other, all on the same page. Same company. Same words. It just holds people longer.
Before / After
A few frames from the story
The whole homepage is one long story. As you scroll, the picture changes. Each of the twelve things Crateworks sells gets its own picture, one after the other. Here are three of them, caught early, in the middle, and near the end.
Why it looks this way
Short attention spans, on purpose.
People have less patience for reading than they used to. A homepage that asks someone to read three paragraphs before they know what a business does loses most of them in the first ten seconds.
TikTok, YouTube Shorts and Instagram Reels trained everyone to expect a new frame every second or two. The new Crateworks homepage borrows that rhythm on purpose. As you scroll, the picture changes: windows, doors, cabinets, wall panels, bath fixtures. Twelve categories, twelve pictures, one after the other, timed to your finger.
Nobody has to read to see what Crateworks does. They just have to keep scrolling. And most people do.
What changed
Same site. New feeling.
Being honest
Before we changed the site, we wrote down how many people were visiting and what they were doing. In thirty and sixty days we will publish the same numbers again, next to the old ones. If the new site does better, that goes on this page. If it does worse, that goes on this page too.
What people ask
Questions on scroll-driven sites.
What is scrollytelling?
Scrollytelling is scroll-triggered narrative. The page reveals a story as you scroll, with each scroll position anchored to a specific visual, motion, or piece of copy. It is a portmanteau of scroll and storytelling. Journalism popularized it (NYT Snow Fall, 2012); brand and product sites use it now to keep attention on a linear message.
What is the difference between scrollytelling and parallax scrolling?
Parallax is one visual technique inside scrollytelling. Parallax means foreground and background move at different speeds as you scroll, creating a depth effect. Scrollytelling is the wider category. It uses parallax, video scrubbing, pinned sections, and copy reveals together to advance a narrative. Every scrollytelling site can use parallax; not every parallax effect is scrollytelling.
How much does a scrollytelling website cost?
A scrollytelling site costs between $300 on Fiverr for a one-page template job and $100,000-plus for a full agency build. Freelance rates run $30 to $200 per hour. Agencies run $100 to $149 per hour. Formula Won Labs's premium build tier prices are published at formulawonlabs.com/services/premium-web-design-cost.
How long does a scrollytelling website take to build?
A simple no-code scrollytelling page ships in days. A custom build with real footage, scroll-scrubbed video, and 8 to 12 timed chapters takes four to eight weeks. The Crateworks scroll story was rebuilt in a single afternoon on top of an existing Next.js 15 site because the design system was already in place.
What tools are used to build scrollytelling websites?
The common stack in 2026 is GSAP with the ScrollTrigger plugin for scroll-linked motion, Framer Motion or Motion.dev for React-native animation, Lenis for smooth-scroll polish, and Rive for interactive vector illustration. WebGL libraries (Three.js, React Three Fiber) are used when depth or 3D is central. The Crateworks build uses a custom ScrollStory component on Next.js 15 with Tailwind v4.
Does scrollytelling work on mobile?
Scrollytelling works on mobile when it is designed for mobile from the start. Scroll-scrubbed video is smoother on mobile than on desktop because the touch scroll frame rate is higher. Sites that fail on mobile usually pinned a hero at desktop and never rebuilt the timing for a smaller viewport. The Crateworks build was authored for both 1440-wide and 390-wide viewports simultaneously.
Is scrollytelling bad for SEO?
Scrollytelling is not inherently bad for SEO. It becomes bad when text is rendered only inside canvas or WebGL (invisible to crawlers), when the page ships a single H1 with no other headings, or when JavaScript blocks the first paint so Core Web Vitals fail. A well-built scroll story ships all copy as real HTML text, keeps LCP under 2.5s, and passes Google's rich-result validator on FAQPage and CreativeWork schema.
When should a business NOT use scrollytelling?
A local service business whose buyer arrives from Google Maps looking for a phone number should not use scrollytelling on the homepage. A scrollytelling home hides the phone number below a scroll experience the buyer did not come for. Scrollytelling is right for brand storytelling, portfolio work, product introductions, and cases where the reader arrived to learn, not to book.
Next
Your homepage does not have to sit still.
If yours feels flat, we can build one like this for you. We start by getting to know your business, then we plan the story your homepage should tell, then we build it.