Creating scroll-driven 3D narratives usually means wrestling with Three.js, scroll listeners, and complex animation timing. Before I really starting understanding those things, I was pretty naive, pissed at AI for not knowing how to build GOOD scrollytelling scenes (lol ridiculous).
With AI being easily accessible to anyone like myself. I got into vibe coding because I wanted to create scrollytelling websites like the ones I saw on Awwwards. As we all know, regardless of your prompts, it aint gonna happen. Theres just too much going on for an ai to be able to make happen unless youre using a custom ai trained with a stack of awwwards level components, custom fonts, materials, etc.
I went that route and built a large dataset to do just that. It works, to a degree but still isnt great with scrollytelling. So, rather than learn three.js like I should have been doing, I took the lazy way so that I could be handed what I needed for importing into an existing site.
With AI doing everything and me telling it what I wanted (I wont take credit) I “built” a visual studio that exports completely self-contained experiences.
What makes it different:
<ul>
<li>True standalone exports – Full vanilla JS engine bundled in the ZIP</li>
<li>Zero dependencies – No npm install, no build process</li>
<li>Drag &amp; drop deployment – Upload to any static host and it just works</li>
<li>React integration option – JSON export for existing React apps</li>
</ul>
Export includes:
ScrollyPipeline.js – Complete custom engine (vanilla JS)
project.json – All chapters, camera paths, keyframes, materials
assets/ – 3D models (bundled or embedded)
index.html – Ready to deploy
Tech highlights:
Custom spline-based camera interpolation
Real-time material system (PBR workflow)
Multi-chapter auto-distribution
Chapter transitions with configurable easing
No React/build dependencies in standalone mode
Run locally:
python -m http.server 8000 # or Live Server in VS Code
Deploy: Vercel, Netlify, GitHub Pages – anywhere static files work.
The goal was to make cinematic scroll experiences as easy to share as a PDF. Drop it on a server and it runs.
Thoughts on this approach vs framework-dependent solutions?
Playground Demo 1:
<a href="https://scroll-studio3-d.vercel.app/playground/" target="_blank" rel="noopener nofollow">https://scroll-studio3-d.vercel.app/playground/</a>
Playground Demo 2:
<a href="https://scroll-studio3-d.vercel.app/playground/about.html" target="_blank" rel="noopener nofollow">https://scroll-studio3-d.vercel.app/playground/about.html</a>
Launch / Docs:
<a href="https://scroll-studio3-d.vercel.app/" target="_blank" rel="noopener nofollow">https://scroll-studio3-d.vercel.app/</a>
<img src="https://media.daily.dev/image/upload/s--91q83o20--/f_auto/v1767210211/ugc/content_7d617305-9d57-41d9-8ff9-5b5336dceecb?_a=BAMAK+ZW0" alt="1000263282">
<img src="https://media.daily.dev/image/upload/s--v16QYh5F--/f_auto/v1767210216/ugc/content_d087adc6-43b2-4fe5-97fc-9714d982f32e?_a=BAMAK+ZW0" alt="1000263284">
<img src="https://media.daily.dev/image/upload/s--_9EbOEBn--/f_auto/v1767210226/ugc/content_4aceadf5-8524-4d33-a1a8-2e51399946be?_a=BAMAK+ZW0" alt="1000263286">

Patrick Dunn

A visual studio tool that generates standalone scroll-driven 3D narrative experiences without requiring Three.js knowledge or build processes. The engine exports self-contained vanilla JavaScript packages with custom camera interpolation, PBR materials, and multi-chapter support. Projects deploy as static files to any host with zero dependencies, or integrate into React apps via JSON export. Built using AI assistance to simplify creating cinematic scrollytelling websites similar to Awwwards showcases.

Built a 3D Scrollytelling Engine