Billy Rose

Portfolio Sandbox

3D Shader Card

GLSL shaders with React Three Fiber

3D Shader Card

React Three Fiber component with custom GLSL shaders, fresnel rim glow, animated noise iridescence, and smooth bobbing motion.

View on 21st.dev

Building the Blue Candy Coin

This component recreates the “floating coin” aesthetic with a soft, candy-like appearance. The key to achieving this look is combining custom GLSL shaders with React Three Fiber's declarative 3D approach.

Technical Breakdown

Geometry: Squashed sphere (flattened on Y-axis) for the pill-like shape
Fresnel Effect: Edge glow that intensifies at grazing angles
Animated Noise: Perlin noise creates flowing “liquid light” iridescence
Subsurface Scattering: Simulates light passing through translucent material
Logo Emboss: SVG path rendered to canvas texture and overlaid with additive blending

Customization

The component exposes props for baseColor,rimColor,backgroundColor,fresnelPower, and more. You can also pass a custom SVG path for the logo via the logoPath prop.

Get the open source component on 21st.dev

Perfect

Let's talk

15 or 30 min meeting

Available for projects

Let's worktogether

Have a project in mind? I'd love to hear about it.