3D
Fly-through
The value moves a camera along an authored spline through a low-poly valley.
How to play
Drag to fly a camera along a path through a 3D world.
Keyboard
Tab to the slider, then ← → to step, PgUp PgDn to jump, Home End for the ends.
Under the surface
A native range input is the real control: it owns the value, the keyboard and what screen readers hear. Everything you see is drawn from it.
What it needs
three.js (MIT, included)
Uses WebGL
The concept
What Fly-through really is.
The value moves a camera along an authored path through a 3D valley, with landmarks named as you pass them.
Where to use it
5 real-world places this slider fits, from product UIs to marketing pages.
- 01
Real-estate walkthroughs
Scrubbing through a property or project site.
- 02
Tourism
Virtual tours of a route or attraction.
- 03
Product storytelling
Flying through a device to show its parts.
- 04
Education
Guided tours of anatomy, geography or history.
- 05
Event venues
Previewing a venue's layout.
Implementation
The source, ready to copy.
Two files and a small shared scaffold. Copy them, or take the whole package.
Loading slider.js…
Work with Codevibe
Like the Fly-through? We can build it for you.
If this design fits your product, we are happy to adapt it to your brand, or design something new that feels just as good to use. The same team that made this library builds websites, apps and product UIs that people enjoy using.
- Custom interactions designed around your brand and your users, not a template.
- Built properly: fast, responsive and accessible, like every slider here.
- From one component to a full product: websites, web apps, mobile apps and design systems.
Just want this slider? Download the code free, no form needed.
More sliders
All 39 sliders →Liquid image
A WebGL shader plane synced to a DOM slider: the value sets the ripple strength and the image flows.
Ready to build?
Tell us what you are working on. We will respond within 12 hours on working days with an honest assessment and a recommended path forward.