Crystal

1"use client"
2 
3import * as React from "react"
4import { useFrame } from "@react-three/fiber"
5import { Float } from "@react-three/drei"
6import * as THREE from "three"
7 
8import {
9  SceneContainer,
10  type SceneContainerProps,
11} from "@/components/threecn/scene-container"
12import {
13  useShadcnTheme,
14  type ThemeMode,
15} from "@/components/hooks/use-shadcn-theme"
16 
17function Gem({
18  speed,
19  roughness,
20  ior,
21  theme,
22}: {
23  speed: number
24  roughness: number
25  ior: number
26  theme: ThemeMode
27}) {
28  const groupRef = React.useRef<THREE.Group>(null)
29  const { primaryColor, accentColor } = useShadcnTheme(theme)
30 
31  useFrame((_, delta) => {
32    if (groupRef.current) groupRef.current.rotation.y += delta * 0.4 * speed
33  })
34 
35  return (
36    <Float speed={2} rotationIntensity={0.5} floatIntensity={0.8}>
37      <group ref={groupRef}>
38        {/* refractive faceted gem */}
39        <mesh>
40          <octahedronGeometry args={[1.6, 0]} />
41          <meshPhysicalMaterial
42            color={primaryColor}
43            transmission={1}
44            thickness={1.8}
45            ior={ior}
46            roughness={roughness}
47            metalness={0}
48            clearcoat={1}
49            clearcoatRoughness={0.1}
50            attenuationColor={primaryColor}
51            attenuationDistance={2.5}
52            transparent
53          />
54        </mesh>
55        {/* glowing inner core */}
56        <mesh scale={0.42}>
57          <octahedronGeometry args={[1.6, 0]} />
58          <meshStandardMaterial
59            color={accentColor}
60            emissive={primaryColor}
61            emissiveIntensity={1.4}
62            toneMapped={false}
63          />
64        </mesh>
65        {/* crisp edge highlight */}
66        <lineSegments>
67          <edgesGeometry args={[new THREE.OctahedronGeometry(1.62, 0)]} />
68          <lineBasicMaterial color={primaryColor} transparent opacity={0.5} />
69        </lineSegments>
70      </group>
71    </Float>
72  )
73}
74 
75export type CrystalProps = {
76  /** Rotation speed multiplier. */
77  speed?: number
78  /** Surface roughness of the glass (0 = mirror-clear). */
79  roughness?: number
80  /** Index of refraction (how much light bends). */
81  ior?: number
82  className?: string
83  theme?: ThemeMode
84  environment?: SceneContainerProps["environment"]
85}
86 
87/**
88 * A faceted glass crystal with real refraction (physical transmission) and a
89 * glowing inner core. Tinted with `--primary`. Self-contained and theme-aware.
90 */
91export function Crystal({
92  speed = 1,
93  roughness = 0.05,
94  ior = 1.7,
95  className,
96// … truncated