How Nate Herk Builds Animated Scroll Websites with Fable 5.1
Built by Nate Herk · · Source: X
Result: Five animated websites, two of them from one prompt. In his side-by-side tests Fable 5.1 matched Fable 5 on visual quality and cost less on every run (for example, $12.83 versus $21.64).
What they built
Nate Herk says he built five animated websites with Fable 5.1. Three were for real projects: the AI Automation Society site, his personal site, and a product site for Glido, a dictation tool. The other two, Ferna (an indoor herb-growing product) and Low Key (a mechanical keyboard), each came from a single prompt. The sites use layered parallax heroes, text that animates in, stacked cards, scroll-controlled video and in-page product demos. Each also has a mobile version.
How it works
According to Nate Herk, asking the model to make something "premium" didn't work well. Concrete inputs did. He describes a seven-part process:
- Brand guidelines for colors, type and visual language.
- Pain, person and promise, so the design fits the actual customer.
- Scroll feedback, such as fading text, counters or layers moving at different speeds.
- Specific inspiration. He names the exact behavior he wants from a reference site, like layered landscapes or stacked cards.
- Reusable components from libraries such as 21st.dev, plus ideas from Godly, Awwwards and Motion Sites.
- Mobile design that he reviews as its own experience.
- Visual verification. The agent screenshots the whole page as it scrolls, frame by frame for complex animation.
He keeps these rules in a reusable skill he calls ScrollCraft. For the one-shot builds, the prompt told the agent to study his earlier site, pull in components, browse design references and generate its own assets with tools like Kie.ai or Higgsfield.
The result
He says both one-shot sites were a strong starting point, but they weren't flawless. Low Key had a visible hard cut in one transition, and the Glido site showed a few wrong logos. He ran the same assignments on Fable 5 and Fable 5.1 and says the designs came out very similar, while Fable 5.1 cost less on every run. He also says that in his view, the seven inputs mattered more than which model version he used.
How to build something similar
- Write down your brand rules and your customer's problem before you prompt. Give the agent both.
- Instead of using adjectives, point to one or two reference sites and name the specific interaction you want copied.
- Save your motion and layout rules as a reusable skill or instruction file, so every build starts from the same standard.
- Have the agent take browser screenshots on desktop and mobile while it scrolls, then fix whatever looks broken before you call it done.
The original post
https://x.com/i/article/2094971964163006468 I built five animated websites with Fable 5.1, including two from a single prompt. The best results did not come from asking the model to make something professional. They came from showing it specific design references, naming the interaction I wanted, and making it verify what it built. TL;DR → Start with brand guidelines plus the pain, person, and promise → Show the agent specific references instead of asking for a vague premium feel → Use layering and subtle scroll feedback to add depth without overwhelming the visitor → Reuse strong components from real design libraries → Verify the full desktop and mobile experience with screenshots → Fable 5.1 produced similar visual quality to Fable 5 in my tests, but it was consistently cheaper What Premium Actually Looks Like The AI Automation Society site is probably my favorite website I have built with Claude. The hero is made from separate visual planes: mountains in the back, a tree line, a dynamic laptop, and foreground elements. They move at different speeds as you scroll, which creates depth without turning the page into a distracting 3D experience. The same idea continues through the page. Text enters as it reaches the viewport. Cards stack on top of one another. The classroom, live calls, events, and leaderboard sections switch dynamically. The pricing area covers the free community, Plus community, and certification cohort, followed by an animated FAQ, YouTube videos, and a final call to action that brings the layered landscape back. The mobile version keeps the dynamic laptop and layered scenery. It also uses text animations. The cards use a simpler interaction than desktop, but the site still feels like the same product instead of a stripped-down backup version. My personal site uses a different visual language. The stats count upward. A restrained animated background adds depth behind the hero. Links react on hover. The Recognition section uses floating 3D cards. Photos rise into view as you scroll. The page also pulls in my book, new YouTube videos, a link to AI Automation Society, and a signature Fable found inside the pictures on my local computer. The navigation stays fixed through the whole experience. Glido pushed the product-demo side further. Its dictation bar types words into Slack, then shows messy speech being cleaned before it is pasted. Other sections demonstrate the same product inside Cursor, Gmail, Slack, and Claude Code. The most interesting sequence sends app logos in opposite directions while the dictation interface stays in the center. A few logos were wrong, which is exactly the kind of issue a one-shot build can leave behind, but the interaction already communicates how the product feels before someone installs it. Give AI Better References “Make this professional” and “make this premium” do not give an AI model enough to work with. For the AI Automation Society site, I used Fora as a reference. I liked its layered landscape and the way the page changed while scrolling, so I described the pieces I wanted to recreate: a back mountain, middle mountain, laptop screen, and front layer of trees. I also pointed out the stacked-card interaction because that was a separate design decision. The agent did not have to guess what I meant by premium. It had a visual behavior to study and a clear reason for using it. For my personal site, I pulled individual components instead of copying one whole site. 21st.dev has backgrounds, gradients, buttons, feature sections, FAQ layouts, and interactive elements. Many components include a prompt you can copy directly into an AI coding agent. That gave me a much better starting point for the animated background, the mouse-responsive 3D element, sideways motion, and text that appears as it enters the screen. I keep those principles inside ScrollCraft, my reusable design skill. It includes rules for layering, scroll behavior, text animation, and the other interaction
Want to build something like this?
Join Shipping Skool free: 4 live build sessions a week and a community that ships.
Join Shipping Skool — Free