A cinematic landing page around an animated 3D character that reacts to scrolling, with custom shaders and a live Telegram feed. Delivered in under three weeks.
The problem
Laelaps needed more than a traditional marketing site: an immersive experience that communicated the project's personality while staying fast on desktop and mobile. That meant an interactive 3D hero, smooth scroll-driven storytelling, custom visual effects, responsive design, fast loading and rendering, and live Telegram community integration.
What I built
I built an interactive landing page centred on a fully animated 3D scene that reacts to scrolling for a cinematic product presentation: importing and optimising the character model, scroll-driven camera and object animations, custom GLSL shaders, a live Telegram feed, cross-device rendering performance, and a fully responsive experience delivered in under three weeks.
Interactive 3D hero
animated character, camera transitions, scroll-driven storytelling, real-time rendering
Scroll animations
smooth scene progression, camera interpolation, object animations, timeline interactions
Custom shader effects
GLSL shaders, dynamic visuals, GPU-accelerated rendering, enhanced lighting
Telegram integration
live feed, real-time project updates, community activity display
Responsive experience
mobile optimisation, adaptive camera, cross-device compatibility
Screens
Hard parts
- 01
Scroll-based 3D storytelling
camera, model animation, and scene transitions synced to scroll position
- 02
Custom GLSL shaders
unique visual effects while keeping real-time rendering performance
- 03
Performance optimisation
geometry, materials, textures, and rendering tuned for desktop and mobile
- 04
Responsive 3D experience
WebGL scene and UI adapted across screen sizes without losing composition
My role
- Three.js development
- React frontend development
- WebGL & GLSL shader programming
- Scroll animation system
- Performance optimisation
- Responsive implementation
- 3D scene integration