Vortex

1"use client"
2 
3import * as React from "react"
4import { useFrame } from "@react-three/fiber"
5import * as THREE from "three"
6 
7import {
8  SceneContainer,
9  type SceneContainerProps,
10} from "@/components/threecn/scene-container"
11import {
12  useShadcnTheme,
13  type ThemeMode,
14} from "@/components/hooks/use-shadcn-theme"
15 
16function seedVortex(count: number, arms: number) {
17  const positions = new Float32Array(count * 3)
18  const radii = new Float32Array(count)
19  const radius = 6
20  for (let i = 0; i < count; i++) {
21    const r = Math.pow(Math.random(), 0.6) * radius
22    const arm = i % arms
23    const branch = (arm / arms) * Math.PI * 2
24    const spin = r * 0.5
25    const scatter = (Math.random() - 0.5) * (0.6 + r * 0.08)
26    const angle = branch + spin
27    positions[i * 3] = Math.cos(angle) * r + scatter
28    positions[i * 3 + 1] = (Math.random() - 0.5) * 0.6
29    positions[i * 3 + 2] = Math.sin(angle) * r + scatter
30    radii[i] = r / radius
31  }
32  return { positions, radii }
33}
34 
35function Spiral({
36  count,
37  speed,
38  arms,
39  theme,
40}: {
41  count: number
42  speed: number
43  arms: number
44  theme: ThemeMode
45}) {
46  const pointsRef = React.useRef<THREE.Points>(null)
47  const { primaryColor, mutedColor } = useShadcnTheme(theme)
48 
49  const { positions, radii } = React.useMemo(
50    () => seedVortex(count, arms),
51    [count, arms]
52  )
53 
54  const colors = React.useMemo(() => {
55    const arr = new Float32Array(count * 3)
56    const c = new THREE.Color()
57    for (let i = 0; i < count; i++) {
58      c.copy(primaryColor).lerp(mutedColor, radii[i])
59      arr[i * 3] = c.r
60      arr[i * 3 + 1] = c.g
61      arr[i * 3 + 2] = c.b
62    }
63    return arr
64  }, [count, radii, primaryColor, mutedColor])
65 
66  useFrame((_, delta) => {
67    if (pointsRef.current) pointsRef.current.rotation.y += delta * 0.12 * speed
68  })
69 
70  return (
71    <points ref={pointsRef} rotation={[0.5, 0, 0]}>
72      <bufferGeometry>
73        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
74        <bufferAttribute attach="attributes-color" args={[colors, 3]} />
75      </bufferGeometry>
76      <pointsMaterial
77        vertexColors
78        size={0.05}
79        sizeAttenuation
80        transparent
81        opacity={0.9}
82        depthWrite={false}
83        blending={THREE.AdditiveBlending}
84      />
85    </points>
86  )
87}
88 
89export type VortexProps = {
90  /** Number of points. */
91  count?: number
92  /** Rotation speed multiplier. */
93  speed?: number
94  /** Number of spiral arms. */
95  arms?: number
96  className?: string
97  theme?: ThemeMode
98// … truncated