Gradient Ribbon

import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import type { Mesh, BufferAttribute } from 'three';

export default function GradientRibbon({ color = '#8a5cff', scale = 1 }: { color?: string; scale?: number }) {
  const ref = useRef<Mesh>(null);
  useFrame((state) => {
    const mesh = ref.current;
    if (!mesh) return;
    const t = state.clock.elapsedTime;
    const pos = mesh.geometry.attributes.position as BufferAttribute;
    for (let i = 0; i < pos.count; i++) {
      const x = pos.getX(i);
      const y = pos.getY(i);
      pos.setZ(i, Math.sin(x * 1.5 + t) * 0.4 + Math.cos(y * 1.5 + t) * 0.3);
    }
    pos.needsUpdate = true;
  });
  return (
    <mesh ref={ref} rotation={[-0.6, 0, 0]} scale={scale}>
      <planeGeometry args={[4, 2.4, 48, 32]} />
      <meshStandardMaterial color={color} metalness={0.4} roughness={0.3} wireframe emissive={color} emissiveIntensity={1.5} />
    </mesh>
  );
}