Exploding 3D buttons!? I created an amazing UI using React x Three.js!

npx create-react-app exploding-button --template typescript

cd exploding-button npm install three @react-three/fiber @react-three/drei

exploding-button/ ├── node_modules/ ├── public/ ├── src/ ├── components/ // Directory for adding other components │ ├── data/ // For files that manage data if necessary │ ├── pages/ // Components managed on a page-by-page basis │ ├── ExplodingButtonPage/ │ │ ├── ExplodingButtonPage.tsx // Main page code │ │ └── ExplodingButtonPage.css // Style sheet │ ├── App.tsx // App entry points │ ├── index.tsx // React rendering process │ ├── App.css // Global Style │ ├── index.css // Global CSS ├── package.json ├── tsconfig.json // TypeScript settings └── README.md // Project overview

import './App.css'; import { ExplodingButtonPage } from './pages'; function App() { return (<div className="App"><ExplodingButtonPage /></div> ); } export default App;

import React, { useRef, useState } from "react"; import { Canvas, useFrame } from "@react-three/fiber"; import { OrbitControls, Stars, Text } from "@react-three/drei"; import * as THREE from "three"; // ===== // PART 1: Constant definition // ===== const PARTICLE_SIZE = 0.1; // 1 particle size const PARTICLE_NUM_WIDTH = 40; // Number of particles (horizontal) const PARTICLE_NUM_HEIGHT = 20; // Number of particles (horizontal) const PARTICLE_NUM_THICKNESS = 5; // Number of particles (horizontal) const BUTTON_SIZE_WIDTH = PARTICLE_SIZE * PARTICLE_NUM_WIDTH; // Button size = 1 particle * Number of particles const BUTTON_SIZE_HEIGHT = PARTICLE_SIZE * PARTICLE_NUM_HEIGHT; // Button size = 1 particle * number of particles const BUTTON_SIZE_THICKNESS = PARTICLE_SIZE * PARTICLE_NUM_THICKNESS; // Button size = 1 particle * number of particles const TEXT = "Click Me!!"; // Text to display const TEXT_SIZE = BUTTON_SIZE_WIDTH / TEXT.length; // Size per character const TEXT_FLOAT_OFFSET = 0.01; // The distance that allows text to float from the button surface const PARTICLE_SPEED = 2.0; // Speed at explosion const PARTICLE_TIME = 5 * 1000; // duration of explosion in seconds const RESET_SPEED = 0.05; // Speed to return to original position // ===== // PART 2: Type definition // ==== type Particle = { id: number; // Unique ID startPosition: THREE.Vector3; // Initial position position: THREE.Vector3; // Current position: THREE.Vector3; // Explosion speed vector scale: number; // Size char?: string; // Characters for text particles }; // ===== // PART 3: Particle generation function // ===== const generateButtonParticles = (): Particle[] => { const particles: Particle[] = []; // --- Generate button particles --- for (let x = 0; x < PARTICLE_NUM_WIDTH; x++) { for (let y = 0; y < PARTICLE_NUM_HEIGHT; y++) { for (let z = 0; z < PARTICLE_NUM_THICKNESS; z++) { const position = new THREE.Vector3( x * PARTICLE_SIZE - BUTTON_SIZE_WIDTH / 2, y * PARTICLE_SIZE - BUTTON_SIZE_HEIGHT / 2, z * PARTICLE_SIZE ); particles.push({ id: particles.length, startPosition: position.clone(), position: position.clone(), velocity: new THREE.Vector3( (Math.random() - 0.5) * PARTICLE_SPEED, (Math.random() - 0.5) * PARTICLE_SPEED, (Math.random() - 0.5) * PARTICLE_SPEED ), scale: PARTICLE_SIZE, }); } } } // --- Generate particle of text --- TEXT.split("").forEach((char, i) => { const position = new THREE.Vector3( i * TEXT_SIZE - BUTTON_SIZE_WIDTH / 2 + TEXT_SIZE / 2, 0, // y-axis center BUTTON_SIZE_THICKNESS + TEXT_FLOAT_OFFSET // Z-axis: slightly floats from the surface ); particles.push({ id: particles.length, startPosition: position.clone(), position: position.clone(), velocity: new THREE.Vector3( (Math.random() - 0.5) * PARTICLE_SPEED, (Math.random() - 0.5) * PARTICLE_SPEED, (Math.random() - 0.5) * PARTICLE_SPEED ), scale: TEXT_SIZE, char, }); }); return particles; }; // ==== // PART 4: Particle Drawing Components // ====== const ExplodingParticles: React.FC<{ particles: Particle[]; state: string }> = ({ particles, state }) => { const groupRef = useRef<THREE.Group> (null); // useFrame: Processing every frame (explosion or return to initial position) useFrame((_, delta) => { groupRef.current?.children.forEach((child) => { const particle = child.userData.particle as Particle; if (state === "explode") { // Explosion: Move based on velocity vector child.position.add(particle.velocity.clone().multiplyScalar(delta)); } else { // return to initial position child.position.lerp(particle.startPosition, RESET_SPEED); } }); }); }); return (<group ref={groupRef}> {particles.map((particle) => particle.char ? ( // Text particle <group key={particle.id} position={particle.position} userData={{ particle }}><Text fontSize={particle.scale} color="white"> {particle.char}</Text></group> ) : ( // Button-shaped particles <mesh key={particle.id} position={particle.position} userData={{ particle }}><boxGeometry args={[particle.scale, particle.scale, particle.scale]} /><meshStandardMaterial color={"#3498db"} /></mesh> ) )}</group> ); }; // ==== // PART 5: Main Components // ===== const ExplodingButtonPage: React.FC = () => { const [particles] = useState<Particle[]> (generateButtonParticles()); const [state, setState] = useState<"idle" | "explode">("idle"); const handleClick = () => { if (state === "idle") { setState("explode"); setTimeout(() => setState("idle"), PARTICLE_TIME); } }; return ( <div style={{ width: "100vw", height: "100vh", background: "black" }}><Canvas camera={{ position: [0, 0, 8] }}> {/* Background effect */} <Stars radius={100} depth={50} count={1000} factor={4} fade /><ambientLight intensity={0.8} /><spotLight position={[10, 10, 10]} intensity={2} castShadow /> {/* Particle Display */}<group onClick={handleClick}><ExplodingParticles particles={particles} state={state} /></group> {/* Camera operation */}<OrbitControls /></Canvas></div> ); }; export default ExplodingButtonPage;

import React, { useRef, useState } from "react"; import { Canvas, useFrame } from "@react-three/fiber"; import { OrbitControls, Stars, Text } from "@react-three/drei"; import * as THREE from "three"; // ===== // PART 1: Constant definition // ===== const PARTICLE_SIZE = 0.1; // 1 particle size const PARTICLE_NUM_WIDTH = 40; // Number of particles (horizontal) const PARTICLE_NUM_HEIGHT = 20; // Number of particles (horizontal) const PARTICLE_NUM_THICKNESS = 5; // Number of particles (horizontal) const BUTTON_SIZE_WIDTH = PARTICLE_SIZE * PARTICLE_NUM_WIDTH; // Button size = 1 particle * Number of particles const BUTTON_SIZE_HEIGHT = PARTICLE_SIZE * PARTICLE_NUM_HEIGHT; // Button size = 1 particle * number of particles const BUTTON_SIZE_THICKNESS = PARTICLE_SIZE * PARTICLE_NUM_THICKNESS; // Button size = 1 particle * number of particles const TEXT = "Click Me!!"; // Text to display const TEXT_SIZE = BUTTON_SIZE_WIDTH / TEXT.length; // Size per character const TEXT_FLOAT_OFFSET = 0.01; // The distance that allows text to float from the button surface const PARTICLE_SPEED = 2.0; // Speed at explosion const PARTICLE_TIME = 5 * 1000; // duration of explosion (seconds) const RESET_SPEED = 0.05; // Speed to return to original position

type Particle = { id: number; // Unique identifier for each particle startPosition: THREE.Vector3; // Initial position position: THREE.Vector3; // Current position velocity: THREE.Vector3; // Movement speed scale: number; // Size char?: string; // Character for text particles };

const generateButtonParticles = (): Particle[] => { const particles: Particle[] = []; // Generate cube particles for button for (let x = 0; x < PARTICLE_NUM_WIDTH; x++) { for (let y = 0; y < PARTICLE_NUM_HEIGHT; y++) { for (let z = 0; z < PARTICLE_NUM_THICKNESS; z++) { const position = new THREE.Vector3( x * PARTICLE_SIZE - BUTTON_SIZE_WIDTH / 2, y * PARTICLE_SIZE - BUTTON_SIZE_HEIGHT / 2, z * PARTICLE_SIZE ); particles.push({ id: particles.length, startPosition: position.clone(), position: position.clone(), velocity: new THREE.Vector3( (Math.random() - 0.5) * PARTICLE_SPEED, (Math.random() - 0.5) * PARTICLE_SPEED, (Math.random() - 0.5) * PARTICLE_SPEED ), scale: PARTICLE_SIZE, }); } } } // Create text particle TEXT.split("").forEach((char, i) => { const position = new THREE.Vector3( i * TEXT_SIZE - BUTTON_SIZE_WIDTH / 2 + TEXT_SIZE / 2, 0, BUTTON_SIZE_THICKNESS + TEXT_FLOAT_OFFSET ); particles.push({ id: particles.length, startPosition: position.clone(), position: position.clone(), velocity: new THREE.Vector3( (Math.random() - 0.5) * PARTICLE_SPEED, (Math.random() - 0.5) * PARTICLE_SPEED, (Math.random() - 0.5) * PARTICLE_SPEED ), scale: TEXT_SIZE, char, }); }); return particles; };

const ExplodingParticles: React.FC<{ particles: Particle[]; state: string }> = ({ particles, state }) => { const groupRef = useRef<THREE.Group> (null); useFrame((_, delta) => { groupRef.current?.children.forEach((child) => { const particle = child.userData.particle as Particle; if (state === "explode") { child.position.add(particle.velocity.clone().multiplyScalar(delta)); } else { child.position.lerp(particle.startPosition, RESET_SPEED); } }); }); return (<group ref={groupRef}> {particles.map((particle) => particle.char ? ( <group key={particle.id} position={particle.position} userData={{ particle }}><Text fontSize={particle.scale} color="white"> {particle.char}</Text></group> ) : ( <mesh key={particle.id} position={particle.position} userData={{ particle }}><boxGeometry args={[particle.scale, particle.scale, particle.scale]} /><meshStandardMaterial color={"#3498db"} /></mesh> ) )}</group> ); };

const ExplodingButtonPage: React.FC = () => { const [particles] = useState<Particle[]> (generateButtonParticles()); const [state, setState] = useState<"idle" | "explode">("idle"); const handleClick = () => { if (state === "idle") { setState("explode"); setTimeout(() => setState("idle"), PARTICLE_TIME); } }; return ( <div style={{ width: "100vw", height: "100vh", background: "black" }}><Canvas camera={{ position: [0, 0, 8] }}><Stars radius={100} depth={50} count={1000} factor={4} fade /><ambientLight intensity={0.8} /><spotLight position={[10, 10, 10]} intensity={2} castShadow /><group onClick={handleClick}><ExplodingParticles particles={particles} state={state} /></group><OrbitControls /></Canvas></div> ); };