Animated Glass Polygons

Component

About

A performant React Three Fiber component for rendering beautiful, animated 3D glass polygons. Fully customizable with props for shape (triangle, octagon, etc.), material (IOR, roughness, chromatic aberration), and animation speed.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Glass Polygons to your project and fits it to your theme.

Code

How Animated Glass Polygons is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

/**
 * Default Demo for 3D Glass Shapes
 *
 */

import {
	Component, // This is our GlassShapesCanvas
	GlassPolygonShape, // Our shape component
	type GlassPolygonShapeProps, // The type for our array
} from '@/components/ui/animated-glass-polygons'

const shapes: GlassPolygonShapeProps[] = [
	{
		type: 'triangle',
		size: 200,
		holeRatio: 0.65,
		depth: 30,
		position: [-150, 100, -30],
		rotation: [0.5, 0.8, 0.3],
		rotationSpeed: [0.002, -0.001, 0.003],
		transmission: 0.97,
		thickness: 3.5,
		roughness: 0.03,
		ior: 1.85,
		chromaticAberration: 0.4,
		anisotropy: 0.2,
		distortion: 1.2,
		distortionScale: 0.6,
		temporalDistortion: 0.15,
		attenuationDistance: 0.5,
		attenuationColor: '#ffd4e8',
		clearcoat: 0.5,
		clearcoatRoughness: 0.2,
		sheen: 0.25,
		sheenColor: '#ffffff',
	},
	{
		type: 'octagon',
		size: 350,
		holeRatio: 0.8,
		depth: 18,
		position: [280, -180, -60],
		rotation: [2.1, 1.5, 4.8],
		rotationSpeed: [-0.0015, 0.0025, -0.002],
		transmission: 0.92,
		thickness: 1.8,
		roughness: 0.08,
		ior: 1.45,
		chromaticAberration: 0.18,
		anisotropy: 0.12,
		distortion: 0.7,
		distortionScale: 0.45,
		temporalDistortion: 0.08,
		attenuationDistance: 1.2,
		attenuationColor: '#e8d4ff',
		clearcoat: 0.35,
		clearcoatRoughness: 0.35,
		sheen: 0.4,
		sheenColor: '#ffffff',
	},
	{
		type: 'triangle',
		size: 150,
		holeRatio: 0.7,
		depth: 22,
		position: [200, 250, -40],
		rotation: [3.8, 2.2, 1.1],
		rotationSpeed: [0.0018, 0.0012, -0.0028],
		transmission: 0.95,
		thickness: 2.2,
		roughness: 0.05,
		ior: 1.68,
		chromaticAberration: 0.22,
		anisotropy: 0.18,
		distortion: 0.9,
		distortionScale: 0.52,
		temporalDistortion: 0.12,
		attenuationDistance: 0.8,
		attenuationColor: '#d4fff4',
		clearcoat: 0.42,
		clearcoatRoughness: 0.28,
		sheen: 0.18,
		sheenColor: '#ffffff',
	},
	// From Section 5 (Square)
	{
		type: 'square',
		size: 190,
		holeRatio: 0.78,
		depth: 16,
		position: [-180, -220, -70],
		rotation: [3.5, 1.1, 5.2],
		rotationSpeed: [0.0022, -0.0018, -0.0035],
		transmission: 0.98,
		thickness: 1.2,
		roughness: 0.12,
		ior: 2.05,
		chromaticAberration: 0.35,
		anisotropy: 0.08,
		distortion: 1.5,
		distortionScale: 0.38,
		temporalDistortion: 0.28,
		attenuationDistance: 0.65,
		attenuationColor: '#d4e8ff',
		clearcoat: 0.52,
		clearcoatRoughness: 0.38,
		sheen: 0.12,
		sheenColor: '#ffffff',
	},
]

export default function DemoOne() {
	return (
		<div className="noise-overlay w-screen h-screen">
			<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center">
				<h1 className="text-xl font-bold text-center">21st 3D Geometry</h1>
			</div>
			<Component zIndex={40}>
				{shapes.map((shapeProps, index) => (
					<GlassPolygonShape key={index} {...shapeProps} />
				))}
			</Component>
		</div>
	)
}