Blog
Create a True Focus Text Effect in React
Blur all words in a sentence except the one currently in focus, directing attention word by word as the user reads.
All posts
Build a Variable Font Proximity Effect in React
Change variable font weight based on cursor distance from each character, creating a fluid typographic interaction effect.
Build an Interactive World Map in React
Render a world map with animated arcs connecting locations, built with equirectangular projection and canvas bezier curves.
Build a Typewriter Effect in React
Create a classic typewriter animation that types text character by character, with support for multiple strings and a blinking cursor.
Build a 3D Tilted Card in React
Create a card that rotates in 3D space based on cursor position, giving it a physical, interactive quality.
Build a Target Cursor Effect in React
Replace the default cursor with a crosshair that follows mouse movement, built with smooth spring physics.
Create an Animated Terminal in React
Build a realistic typing terminal component that plays back a sequence of commands and output, ideal for developer-focused landing pages.
Create a Text Pressure Effect in React
Make text respond to cursor proximity by adjusting variable font weight and scale, creating an interactive pressure simulation.
Create a Soft Aurora Background in React with WebGL
Render a living aurora borealis effect in the browser using a WebGL shader that shifts and breathes with organic color transitions.
Build a Split Text Animation in React
Animate text character by character with a staggered reveal effect using Framer Motion.
Build a Shiny Text Effect in React
Add a shimmering light sweep animation to text using CSS gradients and keyframes, no JavaScript animation library required.
Create a Text Shuffle Animation in React
Animate text by scrambling through random characters before landing on the final string, creating a high-energy reveal effect.
Create a Scroll Velocity Marquee in React
Build a marquee that speeds up and slows down based on scroll velocity, creating a dynamic connection between scrolling and motion.
Create a Shape Blur Effect in React with Three.js
Organic shapes morph and blur continuously in the background using a Three.js scene with post-processing.
Build a Scroll Float Text Animation in React
Animate text so it floats upward and fades in as the user scrolls, using Framer Motion's scroll-linked animation hooks.
Create a Scroll Reveal Text Effect in React
Reveal text word by word or line by line as the user scrolls, using Framer Motion's viewport detection.
Create a Scroll Stack Effect in React
Stack cards on top of each other as the user scrolls, creating a layered depth effect tied to scroll position.
Build a Rotating Text Component in React
Cycle through a list of words with a smooth rotation or slide animation, ideal for dynamic hero taglines in React.
Create a Scrambled Text Effect in React
Scramble text into random characters on hover and restore it, creating a glitchy interactive effect for headings and labels.
Build a Radar Background in React with WebGL
Render a sweeping radar animation with glowing rings, spokes, and fading trails using a WebGL fragment shader.
Build a Reflective Card in React
Add a realistic light reflection effect to cards that moves with the cursor, making surfaces feel tactile and physical.
Create a Pixel Trail Effect in React
Leave a pixelated trail of colored blocks behind the cursor that fades out over time.
Build a Pixel Card Effect in React
Create a card that reveals its content through a pixelated dissolve animation on hover or scroll.
Build a Pixel Trail Background in React
Create a full-page interactive background where the mouse leaves a glowing trail of pixels that fade out over time.
Build a Metallic Paint Shader in React
A WebGL fragment shader renders a fluid metallic surface with light streaks and oil-slick color gradients.
Create Parallax Floating Images in React
Build a collection of elements that shift at different depths in response to mouse movement, creating a convincing 3D parallax effect.
Create a Marquee Along SVG Path in React
Animate content along any curved SVG path, turning logos, text, or icons into a flowing marquee that follows the arc you define.
Create Meta Balls in React with WebGL
Render organic, merging blob shapes using a WebGL marching squares algorithm that reacts to cursor position.
Create Magic Rings in React with WebGL
Render animated concentric rings with a WebGL shader that ripples outward in a continuous, hypnotic loop.
Build a Magnet Effect in React
Make elements attract toward the cursor within a defined radius, creating a tactile, physics-driven hover interaction.
Create a Logo Loop Animation in React
Scroll a row of logos in an infinite horizontal loop with smooth, gap-free motion that pauses on hover.
Build a MacBook Scroll Animation in React
Create a scroll-driven animation where a MacBook lid opens and reveals a screenshot as the user scrolls down the page.
Build a Magic Bento Grid in React
Create an interactive bento grid layout where tiles respond to cursor position with light and movement effects.
Build a Light Pillar Effect in React with WebGL
Render a dramatic volumetric light beam rising from the ground using raymarching in a WebGL fragment shader.
Build Animated Line Waves in React
Create a hypnotic animated line wave background using canvas and sine curves that flow in real time.
Build a Letter Swap Animation in React
Animate individual letters swapping to new characters on hover, creating a playful and fluid text transition effect.
Build an Infinite Menu in React
Create a circular scrolling menu that loops endlessly, wrapping items around a virtual sphere.
Build a Lanyard Badge in React with Physics
Simulate a physics-driven ID badge hanging from a lanyard that swings and reacts to mouse input.
Create a Glass Surface Effect in React
Build a reusable frosted glass material component that works consistently across different background contexts.
Create a Glitch Text Effect in React
Apply a digital distortion glitch effect to text using CSS clip-path layers and keyframe animation, no external library needed.
Create an Interactive Folder Component in React
Build a skeuomorphic folder that opens and fans out its contents on click, making file groupings feel tangible.
Create a Glare Hover Effect in React
A specular glare follows the cursor across a card surface, giving flat UI elements a physical, reflective quality.
Create a Fluid Glass Effect in React
Build a glassmorphic surface with dynamic blur and distortion that responds to content and cursor movement.
Create a Falling Text Animation in React
Characters drop from above with physics-based gravity and bounce, creating a playful and dynamic text reveal effect.
Build a Flowing Menu in React
Create an animated navigation menu where items reveal a marquee strip from the closest edge on hover.
Create an Elastic Slider in React
Build a slider that stretches beyond its bounds on drag and snaps back with a spring animation.
Build an Electric Border Animation in React
Animate a current of light traveling along a border to make UI cards and containers feel alive.
Create an Evil Eye Background in React
Animate a hypnotic iris that tracks the mouse and blinks, built with a WebGL shader and a procedural noise texture.
Create a macOS Dock in React
Replicate the macOS Dock magnification effect where icons scale up as the cursor approaches them.
Build a Dome Gallery in React
Arrange images across a curved 3D dome surface for a unique spatial gallery experience.
Build a Decrypted Text Effect in React
Reveal text by scrambling through random characters that resolve one by one, mimicking a decryption sequence.
Build a Curved Text Loop in React
Flow text along a smooth SVG curve that loops continuously, creating an elegant scrolling marquee with a wave-like path.
Create a Dark Veil Background in React
Render an animated neural-network CPPN pattern with scanlines and hue shift, powered by a WebGL fragment shader.
Build a Color Bends Shader in React
Animate fluid, bending color gradients with a WebGL fragment shader that warps hues as if the screen itself is made of liquid.
Build a Crosshair Cursor in React with GSAP
A precision crosshair cursor with extending lines and a targeting animation, driven by GSAP for buttery-smooth motion.
Create a Circular Gallery in React
Arrange images in a rotating circular layout that responds to drag and scroll input.
Create Circular Text in React
Arrange text along a rotating circle using SVG and CSS, perfect for badges, labels, and decorative UI elements.
Build a Blur Text Animation in React
Create a smooth blur-to-sharp text reveal effect using Framer Motion. Each word or character fades from blurred to crisp on scroll.
Create a Border Glow Effect in React
Add a cursor-following glow that traces the border of a card or container as the mouse moves around it.
Build Circling Elements in React
Create a set of elements that orbit a center point with configurable speed, radius, and stagger using CSS animation and Framer Motion.
Build an ASCII Text Renderer in React
Render text as ASCII art using a character ramp mapped to pixel brightness, entirely in the browser with a canvas element.
Build an Animated List in React
Add staggered entrance animations to any list so items appear one by one with satisfying timing.
Build an Antigravity Effect in React with Three.js
Make elements float upward in a continuous drift, powered by a Three.js particle simulation with custom velocity fields.