Animated Glass Polygons

/**
 * 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>
	)
}