Turn Any Spline Scene Into a Cinematic Scroll Website With Blink
Build a cinematic scroll website around a Spline scene you choose. Get the flexible prompt and the full steps to create it in Blink.
Start here
Now open Spline in another tab. You'll use it for the scene, then use Blink to build the website around it.
Pick a character animation or an abstract composition. A product scene works too. The prompt adapts the page to your scene and topic.
1. Pick the scene you want
In Spline, browse Templates or Community, or open a scene you've already made. Open the scene and preview it before you export.
Check what it actually does. Some scenes follow your mouse. Others loop an animation or respond to clicks. Keep those existing behaviors. A scene without animation can still sit inside an animated website, but this prompt doesn't automatically create new animation inside the 3D scene.
Use a template you're allowed to use, and keep any required credit. Template access and code export availability can depend on the creator's terms and your Spline plan. Don't assume every scene includes every interaction.
2. Paste the prompt into Blink
Open Blink and start your website project. Copy the full prompt below into its chat.
You can submit the prompt first, then send the exported scene URL in your next message in the same project. That's the flow shown in the video. Or grab your export first and include it with the prompt in one message.
Want your own branding? Add your page topic and the action you want the main button to take. A screenshot of your scene helps it match the design. These details are optional. Leave them blank if you don't need them.
Specific design instructions make the request clearer. See the official prompting reference.
3. Copy the React export or scene URL
Go back to your scene in Spline. If you're viewing a community preview, expand or open it so you can access its export controls.
Choose Export → Code → React. Wait for Spline to generate the export. Copy either the full React code or the scene URL shown in that code. The URL you want ends in scene.splinecode. A community page URL or the Public URL embed link isn't the same thing.
Return to the same Blink project. If you've already sent the prompt, send the export in your next message and tell it to use this scene for the website. If you haven't submitted yet, replace the Spline placeholder with your export and send everything together.
The official Spline export guide explains the export controls. The Spline React documentation shows both the component and the scene URL it accepts.
4. Copy the flexible scroll-animation prompt
This is the full prompt. It preserves your scene's existing behavior and builds the scroll sequence around it. You only need to replace the Spline input. Fill in the optional details if you want more control.
Build a complete, cinematic scroll-animated website around the Spline scene I supply.
INPUT
Spline: [PASTE REACT EXPORT CODE OR EXPORTED scene.splinecode URL]
Optional brand/topic: [YOUR DETAILS]
Optional audience and main button action: [YOUR DETAILS]
Optional reference: [ATTACH A SCENE SCREENSHOT]
Treat unchanged optional placeholders as blank. Use my details first, otherwise adapt to the visible scene or screenshot. Match its colors and mood, including light backgrounds. If you can't inspect it, use neutral, editable demo copy without inventing scene details or product claims. If the scene export arrives in my next message, integrate it into this same project.
INTEGRATION
Use @splinetool/react-spline with @splinetool/runtime. Accept either the full React export or its scene.splinecode URL. Preserve the exact URL and relevant export settings. Don't substitute an iframe or image.
Preserve the authored camera, framing, background, and existing animation. Mouse-follow or other interactions may already exist, or may not. Don't recreate tracking, invent events, or overwrite object transforms. Control scene objects only when I supply verified objects and supported events.
DESIGN
Create a striking opening with oversized typography and minimal navigation. Make the scene the main attraction. Use concise, topic-appropriate copy. Avoid invented testimonials or performance claims.
SCROLL CHOREOGRAPHY
Create a roughly 300-400svh section with one 100svh sticky stage. Use GSAP ScrollTrigger or an equivalent existing scroll timeline. Connect animation to scroll progress so it reverses smoothly. Keep normal wheel and touch scrolling.
1. Opening, 0-30%: Show the scene immediately with enormous display lettering. Expand the lettering beyond its frame as scrolling begins. Reveal the headline line by line. Move restrained background graphics at different speeds for depth.
2. Transformation, 30-70%: Move the opening copy away. Sweep a new oversized statement through the composition. Expand graphic elements suited to the scene, such as editorial frames or abstract shapes. Reveal a short supporting message. Make this a clear compositional transformation.
3. Payoff, 70-100%: Resolve the graphics into a precise final arrangement. Assemble the closing headline with staggered word or letter motion. Reveal the primary button, then release the sticky stage naturally into the next section.
Keep one Spline component mounted. Keep its canvas position and dimensions stable inside the sticky stage. Animate the surrounding HTML/CSS layers. Don't assume page scroll can scrub the scene's authored animation.
Place typography behind scene objects only if the existing background is transparent. For opaque scenes, compose text beside the scene or use readable foreground framing. Don't force transparency or cover the subject.
FINISH
Decorative overlays must pass pointer events through. Keep buttons clickable and keyboard accessible. Add a concise topic section below the animation. Navigation must reach real sections. If no button destination was supplied, scroll to the closing section.
Simplify the choreography on phones, keep the main subject visible, and prevent horizontal overflow. Avoid expensive blur animations and unnecessary render loops. Include loading and error states.
For reduced motion, use a static layout. If scene motion can't be disabled, show a supplied still or a text placeholder with an option to load the interactive scene.
Build and inspect the working preview. Check the scene loads, authored interactions still work, and all three scroll phases reverse smoothly. Test a narrow phone viewport, reduced motion, and every button. Fix clipping or blocked interaction. State any checks you couldn't perform.5. Preview the full result
Boom. Now test the page, not just the opening screen.
Scroll slowly to the bottom, then back up. You should see an opening reveal, a clear transformation, and a final call to action. The motion should follow your scrolling in both directions.
Move your mouse over the scene. If the original followed your cursor or reacted to clicks, check that it still does. Open the phone preview too. The text should fit, the main subject should remain visible, and you should be able to scroll past the scene.
Try every button. If something looks wrong, describe the exact problem in Blink and attach a screenshot. Build time and the number of revisions depend on the scene and the generated result.
6. Use this if the first result needs work
Paste this into the same Blink project. Replace the final line with what you want fixed. For example, “The second scroll phase barely changes” or “The headline covers the scene on my phone.”
Refine the website you just built using the same Spline scene and current visual direction. Check the real preview first.
Make the scroll sequence feel dramatic through connected typography and composition changes across its three phases. Keep the Spline canvas stable and mounted once. Preserve any authored scene events.
Fix the specific issues I describe below, then verify scrolling in both directions and on a narrow phone viewport. Don't change the scene URL, background, camera, or existing interactions.
Issues I noticed:
[DESCRIBE WHAT YOU SEE, OR ATTACH A SCREENSHOT]7. Publish and share
When the preview looks right, click Publish in Blink. You can find it in the top-right of the editor or beside a saved version in chat.
Review any hosting options and plan requirements shown for your account, then complete the publishing steps. Use the live URL Blink gives you. The official publishing guide explains the current flow.
Open that link in a fresh tab. Check the scene and scroll sequence on desktop and your phone. Tap the main button. Share the link once the published version works the way you expect.
If you make more changes, preview them and publish again to update the live website.
Make another version
Keep the prompt and replace the Spline export. Change the page topic if you're building for a different brand. Now you can reuse the process without making the same website again.
For another approach, try the living website prompt. If you want to go beyond a landing page, use the app-building guide.
Get the next one first
New prompts every week.
Free. The new drops and the tools behind them, before they hit the feed.
No spam · New issues Sunday · Unsubscribe anytime
Need it custom?
Want this built for you?
Tell me the idea and I’ll build it. An app, a tool, an automation. You don’t need to be technical.
Related guides
Guide
Build a Living Website With One Prompt (Claude Fable 5 x Higgsfield MCP)
The full system from the video: one prompt inside Claude generates a cinematic character with Higgsfield, animates it, then codes a website where it watches your visitor's cursor with its eyes.
Guide
Build a Calorie-Tracker App From a Photo (No Code, ~2 Minutes)
Snap a meal, AI logs the calories and macros. The exact prompt that builds the whole app, backend and all, in about two minutes.
Guide
Clone Any App With AI (And Outrank It On Google)
Give an AI a URL and it rebuilds the whole app as your own, then builds the pages to outrank the original on Google.
Frequently asked questions
You can reuse the prompt with different Spline scenes that you can export and use. The design adapts to the scene and any brand details you provide. Complex scenes may need a simpler mobile layout or performance adjustments.
Either works for this prompt. Use the full React export or its scene.splinecode URL. Get it from Export → Code → React in Spline. The prompt tells Blink how to integrate either form using Spline's React component.
No. It depends on what the scene's creator built. This workflow preserves existing interactions. It doesn't assume mouse-follow behavior exists, and it doesn't add a second tracking system over one that's already there.
The prompt animates the surrounding website as you scroll. The Spline scene keeps its authored behavior. Making a particular object or animation inside the scene respond to page scroll needs a supported setup for that specific scene.
Don't assume that. Access to a template, permission to reuse it, and code export availability can differ. Check your Spline account and the template's terms. Check the current plan and credits shown in Blink before you build.