Velox / real-time visual engineering
Motion
with a purpose.
The image is the reference. The experience is the system that forms it, responds to input and reveals it.
Source image → stable positions
A silhouette.
Not a random cloud.
Image-derived positions hold the roof, body and wheels together. Formation changes the particle state, not the reference geometry.
Pointer force / local response
Disturb the surface.
Keep the shape.
Move across the particle shell. The shader applies a bounded local force; the vehicle remains recognizable.
Shell separation / matching image
The surface was
there all along.
The point field separates as the source image is revealed. Both representations share the same frame.
Real experience / beyond the effect
State, input,
and a way through.
The original showcase joins the visual system to an interactive interface. This capture documents that working frontend.
03 / The actual rendering system
Pixels become
positions.
The original Velox source samples a reduced image through Canvas, selects luminance and edge detail, then uploads particle attributes to a custom WebGL renderer.
Read once.
Image coordinates supply the silhouette. Stable sample positions keep roof, body and wheels related throughout the reveal.
Move on the GPU.
Shader inputs control formation, scatter and pointer influence. The system changes state without rebuilding the particle geometry each frame.
Keep the reference.
The source image and particle shell share a frame. As points separate, the final vehicle remains geometrically consistent.
Original showcase: custom WebGL and Canvas 2D. The scroll-driven inspection above uses the existing YouNeed Three.js adapter to expose the same image-derived relationship.
05 / Performance is part of the effect
Spend frames
where they matter.
- Visibility
- The original renderer gates continued scheduling by scene and document visibility. This case renders on scroll-state or pointer changes and stops when settled.
- Resolution
- The original particle renderer caps pixel ratio at 1.75. The case adapter caps it at 1.5 and limits the backing width; it uses one Points draw rather than individual objects.
- Lifecycle
- The case loads its renderer near the inspection, handles resize and releases geometry, material, renderer and listeners on navigation.
- Fallback
- Small screens, reduced motion and unavailable WebGL retain real imagery and a complete static sequence. Context loss returns to that static presentation.
Velox is a creative automotive showcase. Vehicle imagery and concept specifications do not represent a manufactured vehicle, real sales or vehicle-engineering results.
What the work proves
The effect is only
half the engineering.
The other half is state, input, lifecycle and a useful experience when motion is unavailable.
Explore Velox live ↗