AuroraRibbons

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 
16const VERTEX_SHADER = /* glsl */ `
17  varying vec2 vUv;
18  void main() {
19    vUv = uv;
20    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
21  }
22`
23 
24const FRAGMENT_SHADER = /* glsl */ `
25  uniform vec3 uColorA;
26  uniform vec3 uColorB;
27  uniform float uOpacity;
28  varying vec2 vUv;
29  void main() {
30    vec3 color = mix(uColorA, uColorB, vUv.x);
31    float along = sin(vUv.x * 3.14159265);
32    float edge = sin(vUv.y * 3.14159265);
33    float alpha = along * pow(edge, 1.6) * uOpacity;
34    gl_FragColor = vec4(color, alpha);
35  }
36`
37 
38function Ribbon({
39  index,
40  total,
41  speed,
42  amplitude,
43  colorA,
44  colorB,
45  isDark,
46}: {
47  index: number
48  total: number
49  speed: number
50  amplitude: number
51  colorA: THREE.Color
52  colorB: THREE.Color
53  isDark: boolean
54}) {
55  const meshRef = React.useRef<THREE.Mesh>(null)
56  const materialRef = React.useRef<THREE.ShaderMaterial>(null)
57  /** Pristine plane Y positions, captured on the first frame. */
58  const baseYRef = React.useRef<Float32Array | null>(null)
59 
60  const phase = (index / total) * Math.PI * 2
61  const zOffset = (index - (total - 1) / 2) * 0.7
62  const yOffset = (index - (total - 1) / 2) * 0.3
63 
64  const uniforms = React.useMemo(
65    () => ({
66      uColorA: { value: new THREE.Color() },
67      uColorB: { value: new THREE.Color() },
68      uOpacity: { value: 0.55 },
69    }),
70    []
71  )
72 
73  useFrame(({ clock }) => {
74    const mesh = meshRef.current
75    const material = materialRef.current
76    if (!mesh || !material) return
77 
78    const t = clock.getElapsedTime() * speed
79    const pos = mesh.geometry.getAttribute("position") as THREE.BufferAttribute
80 
81    if (!baseYRef.current || baseYRef.current.length !== pos.count) {
82      const base = new Float32Array(pos.count)
83      for (let i = 0; i < pos.count; i++) base[i] = pos.getY(i)
84      baseYRef.current = base
85    }
86    const baseY = baseYRef.current
87 
88    for (let i = 0; i < pos.count; i++) {
89      const x = pos.getX(i)
90      const wave =
91        Math.sin(x * 0.5 + t * 0.8 + phase) * amplitude +
92        Math.sin(x * 0.85 - t * 0.5 + phase * 1.7) * amplitude * 0.35
93      pos.setY(i, baseY[i] + wave + yOffset)
94// … truncated