Most scroll websites look impressive for about three seconds.
You scroll. Something moves. It feels cinematic.
Then you look closer and realize what you're actually watching:
A stack of pre-rendered images.
Not a live 3D scene. Not real lighting. Not a model you can inspect from another angle. Just frames stitched together to look like motion.
That approach works for marketing one-offs. But the moment you want to change a camera angle, swap a model, or tune a light — you're back in a video editor or a 3D tool, re-exporting hundreds of frames.
We built KINESIS to skip that loop entirely.
Scroll is the playhead. The browser is the stage. What you edit is what ships.
Try the live demo: kinesis.codesempai.com — scroll through a scene, then press E to open the in-browser editor.
Source code: github.com/sempai-lab/KINESIS-3D
What Is KINESIS?
KINESIS is a scroll-driven 3D scene studio — open source, built by Codesempai, and designed for people who want a real interactive 3D website without maintaining a separate authoring pipeline.
You drop in a .gltf or .glb model, frame the camera, add lights, record keyframes, and tie the whole thing to page scroll. When you're done, you save the scene into the project. The hosted site loads it for every visitor.
No timeline software. No render farm. No "export 240 PNGs and hope the scroll math still lines up."
The stack is familiar if you've touched modern web 3D:
Next.js 14 React 18 + TypeScript Three.js React Three Fiber + drei Post-processing (bloom / glow)
But you don't need to write shader code to get a polished result. The editor lives on the page itself — so the preview and the production build stay in sync.
Why Scroll-Driven 3D Matters
Scroll is already how people read the web. Adding a 3D layer on top of that rhythm — instead of fighting it — makes the experience feel intentional rather than gimmicky.
In KINESIS, each section of the page is a beat on one global timeline:
- Scroll forward → the camera moves forward
- Models change pose, scale, or visibility
- Built-in glTF animations can map to scroll position
- Lights and glow respond to what you authored
That last point matters. A lot of "3D scroll" demos are pretty but static under the hood. KINESIS runs an actual WebGL scene: real point lights, real emissive glow, real orbit paths — all interpolated as you scroll.
How It Works (Without the Jargon)
1. Add your models
Place GLTF/GLB files under public/models/ and add them to the scene from a simple checklist. The first asset shows on every section; later ones can start hidden so you reveal them exactly where you want.
2. Pose with the gizmo
Grab a model. Move it. Rotate it. Change its size or glow. What you set at the current scroll position becomes a keyframe.
3. Set the camera
Frame your subject, tune FOV and orbit feel, use F to zoom-to-fit the selected asset. The camera path is its own timeline — independent keyframes, smooth blends between them.
4. Record scene keys
Press K (or click Set scene key) to capture the camera and every asset's pose, size, glow, and visibility in one shot. Scrolling between keys interpolates the whole scene.
5. Save and ship
Hit save. Camera data, lights, and assets write to JSON under public/. Deploy the site. Visitors get your choreography automatically — no localStorage required on their end.
What You Can Control
KINESIS is not a single-trick scroll effect. Here's a practical breakdown:
Assets
- Multiple models in one scene
- Per-section show/hide
- Size and emissive glow keyframed over scroll
- Hand-posed position and rotation
Animation
For models that ship with built-in clips:
- Playback speed and loop mode
- Custom in/out range on the clip
- Scroll-mapped playback — scrub the animation with scroll instead of autoplay
Lights
- Add point lights, drag them into place
- Tune color, intensity, and falloff distance
- Master on/off for the whole lighting rig
Camera
- Global keyframe timeline mapped to 0–100% scroll
- Orbit, pan, zoom speeds
- FOV and minimum zoom limits
- Optional mouse parallax on top of the authored path
Export / import
The entire scene — camera, assets, lights, parallax settings — can be exported as one JSON file and imported elsewhere. Useful for backups, sharing setups between pages, or versioning a look before you commit it to the repo.
Who Is This For?
KINESIS fits a few clear use cases:
- Developers building a portfolio or product landing page with Three.js — without hand-rolling scroll math every time
- Designers who want to choreograph a 3D hero section in the browser, not in After Effects
- Studios shipping client sites where the 3D layer needs to stay editable after launch
- Learners exploring React Three Fiber with a working editor instead of a blank canvas
If you've ever thought:
I want Apple-style scroll motion, but I don't want fake image sequences.
…this is the direction KINESIS is built for.
Live Demo vs. Local Dev
The fastest way to understand it is to use the hosted version:
Scroll the Station page. Switch to Rocket from the nav. Open GitHub from the menu if you want to clone the repo.
To run it locally:
npm install npm run dev # → http://localhost:3000
Drop models into public/models/, point a page at one via defaultModelUrl in app/page.tsx, and press E to start editing.
KINESIS vs. Pre-Rendered Scroll Sites
A quick comparison that usually clears up the "why bother with real 3D?" question:
| Approach | Pre-rendered frames | KINESIS (live 3D) |
|---|---|---|
| Interactivity | Limited — looks 3D, behaves like images | Real WebGL scene, lights, models |
| Editing a camera move | Re-export all frames | Retime a keyframe in the editor |
| File weight | Often hundreds of MB of images | GLTF models + small JSON choreography |
| Authoring tool | Separate 3D + export pipeline | Built into the page (press E) |
| Scroll sync | Custom JS over image index | Native timeline sampling |
Keyboard Shortcuts Worth Knowing
Once you're in the editor, these save time:
E— open / close editorK— set scene key (camera + all assets)F— frame / zoom-to-fit selected assetA— select all keyframes on the timelineDelete— remove selected key (or key at playhead)- Arrow keys — pan camera
Shift+ arrows — rotate model+/−— zoom camera
The full feature list lives in the repo under FEATURES.md if you want a reference while authoring.
Open Source and Free to Use
KINESIS is public on GitHub:
github.com/sempai-lab/KINESIS-3D
Clone it, run it locally, fork it for a client project, or use the live site as a reference implementation. The goal is to lower the barrier between "I have a 3D model" and "I have a scroll-driven website that actually runs in production."
Final Thoughts
Scroll-driven design works because it matches how people already move through a page. KINESIS takes that seriously: scroll isn't a trigger for a video strip — it's the timeline.
You arrange the set. Place the lights. Block the camera. Keyframe the beats. Save once. Ship.
That's the whole pitch. No render queue. No frame export folder sitting at 4 GB on your desktop.
If you've been looking for a way to build a scroll-driven 3D website with Three.js and React Three Fiber — without maintaining two separate pipelines for "authoring" and "production" — start here:
Scroll it. Edit it. Ship it.
That's KINESIS.
Built by Codesempai.
