WebGL component
Key features
Custom vortex shader
GLSL distortion creates a twisting object that feels organic, fluid, and continuously alive.
Velocity controls
Tune animation speed, axis rotation, distortion strength, and mouse response for different visual moods.
Fresnel edge glow
Cinematic edge highlights add depth, polish, and a premium 3D lighting feel without extra setup.
Camera direction
Adjust camera distance, angle, and optional orbit motion for centered hero shots or ambient backgrounds.
Geometry detail
Balance visual smoothness and performance with adjustable resolution and an optional wireframe mode.
Built for smooth playback
Optimized WebGL rendering keeps the component practical for modern hero visuals and live pages.
Website hero sections with a premium motion centerpiece
Creative agency landing pages and WebGL showcases
Interactive portfolios that need a futuristic signature visual
Tech startup pages that need background motion without generic stock imagery
Velocity
Distortion
Camera
Wireframe
Camera position, animation axes, geometry detail, lighting intensity, and material color can all be tuned directly in Framer for different design directions.
Ready to gather your experts’ know-how?
See how Syllotips can help your team deliver expert-level support at scale.
