diff --git a/src/experiments/71.text-distortion.tsx b/src/experiments/71.text-distortion.tsx new file mode 100644 index 0000000..a427696 --- /dev/null +++ b/src/experiments/71.text-distortion.tsx @@ -0,0 +1,84 @@ +import { + MeshTransmissionMaterial, + OrbitControls, + Text +} from '@react-three/drei' +import { useFrame } from '@react-three/fiber' +import { useControls } from 'leva' +import { useRef } from 'react' + +const RADIUS = 2.3 +const fontUrl = + '/fonts/grotesque/BasementGrotesqueDisplay-UltraBlackExtraExpanded.woff' + +const TextDistortion = () => { + const { text, backsideThickness, thickness } = useControls({ + text: { + value: 'basement. basement. basement. ', + label: 'Text' + }, + backsideThickness: { value: 5, min: 0, max: 10 }, + thickness: { value: 2.3, min: 0, max: 10 } + }) + const ref = useRef(null) + + useFrame(() => { + if (!ref.current) return + ref.current.rotation.y += 0.01 + ref.current.rotation.x += 0.01 + ref.current.rotation.z += 0.01 + }) + + // Calculate positions for text + const textPositions: { x: number; z: number }[] = [] + const angleStep = (2 * Math.PI) / text.length + for (let i = 0; i < text.length; i++) { + const angle = i * angleStep + const x = RADIUS * Math.cos(angle) + const z = RADIUS * Math.sin(angle) + textPositions.push({ x, z }) + } + + return ( + <> + + + + + + + + + + {text + .split('') + .reverse() + .map((char: string, index: number) => ( + + {char} + + ))} + + + ) +} + +TextDistortion.Title = 'Text Distortion' + +export default TextDistortion