Text Animation

rohit
Mar 19, 2026 10
Animation
Live Preview

Live Editor

<body>
<div id="info">three.js · text particle field · 2026</div>
<!-- Import Three.js and OrbitControls from CDN -->
<script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.128.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.128.0/examples/jsm/"
            }
        }
    </script>
<script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // --- setup scene, camera, renderer ---
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x050208); // deep purple-black
        scene.fog = new THREE.FogExp2(0x050208, 0.0025);

        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 2, 18);
        camera.lookAt(0, 1, 0);

        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        renderer.shadowMap.enabled = false; // not needed
        renderer.toneMapping = THREE.ReinhardToneMapping;
        renderer.toneMappingExposure = 1.2;
        document.body.appendChild(renderer.domElement);

        // --- simple controls to allow user to orbit (optional, but adds interactivity) ---
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;
        controls.autoRotate = true;
        controls.autoRotateSpeed = 1.2;
        controls.enableZoom = true;
        controls.enablePan = false;
        controls.maxPolarAngle = Math.PI / 2.2; // keep above horizon
        controls.target.set(0, 1.5, 0);

        // --- lights ---
        // ambient base
        const ambient = new THREE.AmbientLight(0x404060);
        scene.add(ambient);

        // colorful point lights to make the text pop
        const light1 = new THREE.PointLight(0xff6030, 1, 30);
        light1.position.set(5, 5, 5);
        scene.add(light1);

        const light2 = new THREE.PointLight(0x3060ff, 1, 30);
        light2.position.set(-5, 3, 5);
        scene.add(light2);

        const light3 = new THREE.PointLight(0xaaff40, 0.8, 30);
        light3.position.set(0, 8, -5);
        scene.add(light3);

        // back rim light
        const backLight = new THREE.PointLight(0xaa88ff, 1.2, 25);
        backLight.position.set(0, 2, -8);
        scene.add(backLight);

        // subtle moving light for drama
        const movingLight = new THREE.PointLight(0xffaa44, 1.5, 20);
        movingLight.position.set(3, 4, 6);
        scene.add(movingLight);

        // --- create text texture via canvas ---
        function createTextTexture(message, fontColor = '#ffaa66', glowColor = '#ff4d00') {
            const canvas = document.createElement('canvas');
            canvas.width = 512;
            canvas.height = 256;
            const ctx = canvas.getContext('2d');
            
            // clear with transparent
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // draw text with glow
            ctx.font = 'bold 140px "Inter", "Arial Black", "Impact", sans-serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            // shadow / glow
            ctx.shadowColor = glowColor;
            ctx.shadowBlur = 30;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
            
            // fill style: gradient for fiery look
            const gradient = ctx.createLinearGradient(100, 0, 412, 200);
            gradient.addColorStop(0, '#ffb56b');
            gradient.addColorStop(0.5, '#ff6a00');
            gradient.addColorStop(1, '#b33e00');
            ctx.fillStyle = gradient;
            
            ctx.fillText(message, canvas.width/2, canvas.height/2);
            
            // add extra outer glow by drawing multiple times with blur
            ctx.shadowBlur = 50;
            ctx.shadowColor = '#ff7b00';
            ctx.fillStyle = 'rgba(255, 100, 0, 0.3)';
            ctx.fillText(message, canvas.width/2, canvas.height/2);
            
            return new THREE.CanvasTexture(canvas);
        }

        // --- create the main text plane (floating in center) ---
        const textMaterial = new THREE.MeshStandardMaterial({
            map: createTextTexture('HELLO', '#ffaa66', '#ff4d00'),
            emissive: new THREE.Color(0x331100),
            emissiveIntensity: 0.6,
            side: THREE.DoubleSide,
            transparent: true,
            depthWrite: true,
            roughness: 0.3,
            metalness: 0.1,
            emissiveMap: createTextTexture('HELLO', '#ffaa66', '#ff4d00') // reuse for glow areas
        });

        const textGeometry = new THREE.PlaneGeometry(8, 3.5);
        const textMesh = new THREE.Mesh(textGeometry, textMaterial);
        textMesh.position.set(0, 1.8, 0);
        textMesh.rotation.y = 0.2; // slight rotation for dynamism
        scene.add(textMesh);

        // --- also create a floating wireframe / ribbon around the text to enhance ---
        const ribbonPoints = [];
        for (let i = 0; i <= 64; i++) {
            const t = i / 64 * Math.PI * 2;
            const radius = 5.2;
            const x = Math.sin(t * 2) * 1.2; // wavy
            const y = Math.cos(t * 1.5) * 1.8 + 1.8;
            const z = Math.sin(t) * radius * 0.7;
            ribbonPoints.push(new THREE.Vector3(
                Math.sin(t) * 4.5,
                y,
                Math.cos(t) * 4.2
            ));
        }
        const ribbonGeometry = new THREE.BufferGeometry().setFromPoints(ribbonPoints);
        const ribbonLine = new THREE.LineLoop(
            ribbonGeometry,
            new THREE.LineBasicMaterial({ color: 0xff6a30, emissive: 0x552200 })
        );
        scene.add(ribbonLine);

        // thicker glowing line
        const ribbonPoints2 = [];
        for (let i = 0; i <= 64; i++) {
            const t = i / 64 * Math.PI * 2;
            const y = Math.cos(t * 2) * 2.2 + 1.8;
            ribbonPoints2.push(new THREE.Vector3(
                Math.sin(t) * 5.0,
                y,
                Math.cos(t) * 4.8
            ));
        }
        const ribbonGeometry2 = new THREE.BufferGeometry().setFromPoints(ribbonPoints2);
        const ribbonLine2 = new THREE.LineLoop(
            ribbonGeometry2,
            new THREE.LineBasicMaterial({ color: 0xffaa44, emissive: 0x331100 })
        );
        scene.add(ribbonLine2);

        // --- particle system: thousands of glowing points floating around ---
        const particleCount = 4500;
        const particlesGeo = new THREE.BufferGeometry();
        
        const positions = new Float32Array(particleCount * 3);
        const colors = new Float32Array(particleCount * 3);

        const color = new THREE.Color();

        for (let i = 0; i < particleCount; i++) {
            // distribute in a sphere/cylinder shape around text
            const radius = 7 + Math.random() * 8; // 7 to 15
            const theta = Math.random() * Math.PI * 2;
            const phi = Math.acos((Math.random() * 2) - 1); // spherical
            
            // but we want more density near the text plane, so mix with cylindrical bias
            let x, y, z;
            if (i < 3000) {
                // toroidal / ring distribution
                const r = 6 + Math.random() * 5;
                const angle = Math.random() * Math.PI * 2;
                x = Math.cos(angle) * r;
                z = Math.sin(angle) * r;
                y = (Math.random() - 0.5) * 5 + 1.8;
            } else {
                // outer cloud
                const r = 9 + Math.random() * 8;
                const angle = Math.random() * Math.PI * 2;
                x = Math.cos(angle) * r;
                z = Math.sin(angle) * r;
                y = (Math.random() - 0.5) * 7 + 1.5;
            }

            positions[i*3] = x;
            positions[i*3+1] = y;
            positions[i*3+2] = z;
            
            // warm colors: oranges, reds, yellows, hints of purple
            const hue = 0.03 + Math.random() * 0.12; // 0.03–0.15 (orange-red)
            const sat = 0.8 + Math.random() * 0.2;
            const lig = 0.5 + Math.random() * 0.5;
            color.setHSL(hue, sat, lig);
            
            colors[i*3] = color.r;
            colors[i*3+1] = color.g;
            colors[i*3+2] = color.b;
        }

        particlesGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        particlesGeo.setAttribute('color', new THREE.BufferAttribute(colors, 3));

        // create particle texture (soft circle)
        const particleCanvas = document.createElement('canvas');
        particleCanvas.width = 32;
        particleCanvas.height = 32;
        const pCtx = particleCanvas.getContext('2d');
        pCtx.clearRect(0, 0, 32, 32);
        pCtx.beginPath();
        pCtx.arc(16, 16, 14, 0, Math.PI * 2);
        const gradient = pCtx.createRadialGradient(16, 16, 0, 16, 16, 16);
        gradient.addColorStop(0, 'rgba(255,255,255,1)');
        gradient.addColorStop(0.5, 'rgba(255,180,80,1)');
        gradient.addColorStop(1, 'rgba(255,100,0,0)');
        pCtx.fillStyle = gradient;
        pCtx.fill();

        const particleTexture = new THREE.CanvasTexture(particleCanvas);

        const particleMaterial = new THREE.PointsMaterial({
            size: 0.25,
            map: particleTexture,
            blending: THREE.AdditiveBlending,
            depthWrite: false,
            vertexColors: true,
            transparent: true,
            opacity: 0.9
        });

        const particleSystem = new THREE.Points(particlesGeo, particleMaterial);
        scene.add(particleSystem);

        // add some tiny drifting particles near the text (sparks)
        const sparkCount = 800;
        const sparkGeo = new THREE.BufferGeometry();
        const sparkPos = new Float32Array(sparkCount * 3);
        for (let i = 0; i < sparkCount; i++) {
            const r = 3 + Math.random() * 4;
            const angle = Math.random() * Math.PI * 2;
            sparkPos[i*3] = Math.cos(angle) * r;
            sparkPos[i*3+1] = (Math.random() - 0.5) * 5 + 1.5;
            sparkPos[i*3+2] = Math.sin(angle) * r;
        }
        sparkGeo.setAttribute('position', new THREE.BufferAttribute(sparkPos, 3));
        const sparkMat = new THREE.PointsMaterial({
            size: 0.12,
            color: 0xffaa44,
            blending: THREE.AdditiveBlending,
            transparent: true,
            opacity: 0.7
        });
        const sparkSystem = new THREE.Points(sparkGeo, sparkMat);
        scene.add(sparkSystem);

        // --- subtle ground reflection / glow disc ---
        const glowDiscGeo = new THREE.CircleGeometry(6, 32);
        const glowDiscMat = new THREE.MeshStandardMaterial({
            color: 0xff5500,
            emissive: 0x441100,
            transparent: true,
            opacity: 0.15,
            side: THREE.DoubleSide
        });
        const glowDisc = new THREE.Mesh(glowDiscGeo, glowDiscMat);
        glowDisc.rotation.x = -Math.PI / 2;
        glowDisc.position.y = -0.5;
        scene.add(glowDisc);

        // --- animation loop ---
        let clock = new THREE.Clock();

        function animate() {
            const delta = clock.getDelta();
            const elapsedTime = performance.now() / 1000; // seconds

            // animate particles: gentle drift
            const positions = particleSystem.geometry.attributes.position.array;
            // for a subtle effect, we can rotate the whole system, but we'll do something more organic:
            // slowly rotate outer cloud? but we have many points. Instead let's rotate the spark system.
            sparkSystem.rotation.y += 0.0005;
            sparkSystem.rotation.x += 0.0002;

            // animate moving light
            movingLight.position.x = Math.sin(elapsedTime * 0.7) * 6;
            movingLight.position.z = Math.cos(elapsedTime * 0.5) * 7;
            movingLight.position.y = 3 + Math.sin(elapsedTime * 1.2) * 2;

            // slight floating for text mesh
            textMesh.position.y = 1.8 + Math.sin(elapsedTime * 2) * 0.1;
            textMesh.rotation.y = 0.2 + Math.sin(elapsedTime * 0.6) * 0.1;
            
            // rotate ribbon lines
            ribbonLine.rotation.y += 0.001;
            ribbonLine2.rotation.y -= 0.0015;
            ribbonLine.position.y = 1.8 + Math.sin(elapsedTime * 1.3) * 0.2;
            ribbonLine2.position.y = 1.8 + Math.cos(elapsedTime * 1.7) * 0.2;

            // controls auto-rotate
            controls.update();

            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        }

        animate();

        // --- resize handler ---
        window.addEventListener('resize', onWindowResize, false);
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        // optional: add subtle starfield background? we already have fog, but we can add distant particles
        // (already have enough particles, but let's add a few very distant ones for depth)
        const distantStarsGeo = new THREE.BufferGeometry();
        const distantPos = new Float32Array(600 * 3);
        for (let i = 0; i < 600; i++) {
            const r = 40 + Math.random() * 50;
            const theta = Math.random() * Math.PI * 2;
            const phi = Math.acos((Math.random() * 2) - 1);
            distantPos[i*3] = Math.sin(phi) * Math.cos(theta) * r;
            distantPos[i*3+1] = Math.sin(phi) * Math.sin(theta) * r * 0.4; // flatten slightly
            distantPos[i*3+2] = Math.cos(phi) * r;
        }
        distantStarsGeo.setAttribute('position', new THREE.BufferAttribute(distantPos, 3));
        const distantStarsMat = new THREE.PointsMaterial({ color: 0x885522, size: 0.4, transparent: true, opacity: 0.2, blending: THREE.AdditiveBlending });
        const distantStars = new THREE.Points(distantStarsGeo, distantStarsMat);
        scene.add(distantStars);

        console.log('Three.js text animation ready');
    </script>
</body>
   body {
            margin: 0;
            overflow: hidden;
            background-color: black;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
        }
        #info {
            position: absolute;
            bottom: 24px;
            left: 0;
            right: 0;
            text-align: center;
            color: rgba(255, 220, 180, 0.5);
            font-size: 14px;
            letter-spacing: 2px;
            text-transform: uppercase;
            pointer-events: none;
            z-index: 10;
            text-shadow: 0 0 15px #ff5e00;
            backdrop-filter: blur(4px);
            width: fit-content;
            margin: 0 auto;
            padding: 8px 24px;
            border-radius: 60px;
            border: 1px solid rgba(255, 140, 0, 0.2);
            background: rgba(10, 5, 0, 0.3);
        }
ENCODED
Categories

Text Animation

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet

AI Code Assistant
