Journal
Engineering · 5 Oct 2026 · 4 min read
How we turned a flat SVG mark into a refracting real-time sculpture that still loads fast on a mid-range Android phone.
KTKripson Team
The glass K on our home page is not a video. It's rendered live in your browser with Three.js and React Three Fiber.
From SVG to geometry
The mark is three shapes: a stem and two blades. We trace the same coordinates as the SVG into Three.js shapes and extrude them with a soft bevel.
Glass that bends light
The stem and upper blade use a transmission material that refracts what's behind it, with a touch of chromatic aberration. The lower blade glows ember — the same colour as the dot in our wordmark.
Staying fast
- The scene loads only when it scrolls into view
- Phones and low-core devices get a lighter material
- Lighting is generated in the browser — no HDR downloads
- Reduced-motion users get a static image
Want something like this for your brand? See 3D & motion.
#3D#WebGL#Three.js
Enjoyed this? Get the next one by email.