Animation Prompts
Prompts for motion and interaction — text animations, scroll effects, hover states and more. Copy one to bring your interface to life.
Tubes Interactive Background
A high-performance interactive 3D background featuring neon tubes that follow the cursor. Based on threejs-components, it includes a click interaction to randomize colors and a hero section overlay. Source: https://codepen.io/soju22/pen/qEbdVjK
Force Field Background
An interactive, particle-based force field background effect that reacts to mouse movement. Uses p5.js to render particles based on image brightness maps, creating a fluid, magnetic visual experience. Source: https://codepen.io/vainsan/pen/ByoXMoB
Hyper-Speed Loading State
Loading animation UI featuring a character-like loader with animated lines, a body made from geometric shapes, and moving horizontal lines across the background. The loader have smooth animations with multiple synchronized motion effects including rotation, translation, and opacity fades.
Card Swap
An elegant card swapping animation component with depth perception and perspective. Features automated cycling of cards with a premium floating feel. Source: ReactBits
The "Stacking Cards" Effect
A portfolio section where cards stack sticky at the top as the user scrolls, creating a deck-of-cards effect using GSAP.
Scroll Journey Line
An SVG line connector that animates/draws itself based on the user's scroll percentage using Framer Motion.
Parallax Stars Background
A mesmerizing space-themed background with animated parallax pixel stars and a radial gradient atmosphere. Features three layers of stars moving at different speeds to create depth.
GSAP Horizontal scroll
Gooey Gradient Background
A mesmerizing, interactive gooey liquid gradient background with animated blobs and mouse-following effect. Perfect for immersive landing pages.
Light Rays Background
A minimalist showcase of a high-end WebGL light rays background effect with mouse interaction and atmospheric motion. Source: ReactBits
"Exploded View" Assembly
A scroll-driven animation where a central product or UI element explodes into its constituent parts and then reassembles into a new layout. Perfect for 'how it works' or feature breakdown sections.
Interactive Waves Background
An interactive, wavy background effect using Perlin noise and canvas. Responds to mouse movement with fluid physics. Source: ReactBits
Liquid Ether Background
A production-grade showcase for the LiquidEther fluid simulation background effect. Features a minimalist, premium layout that emphasizes the motion and fluid dynamics of the WebGL-based ether effect.
Hover reveal effect
Source: https://x.com/emilylambert/status/2005113433780617713
Ghost Cursor
A fluid, smoky cursor trail effect using Three.js shader materials and post-processing bloom.
Jelly Squish Button
A high-fidelity interactive 3D jelly simulation that responds to vertical dragging and mouse movement. Uses GSAP for physics-based animation and optimized image sequencing. Perfect for playful hero sections or interactive showcases. Source: https://codepen.io/cerpow/pen/LEZYxqM
Horizontal Gallery
A sticky section that locks vertical scroll and translates it into horizontal movement to showcase a gallery. Features robust GSAP ScrollTrigger initialization.
Scroll animation
Typing animation
A typing animation component that reveals each character of a headline with a 50ms delay, featuring a minimalist showcase and replay functionality.
Masonry Gallery
A high-performance, GSAP-powered Masonry layout component with fluid animations, entrance effects (blur-to-focus, directional stagger), and interactive hover states. Supports responsive column counts and lazy-loading pre-checks.
Plasma Background
A mesmerizing, high-performance plasma background effect using OGL (WebGL) with customizable color, speed, and mouse interaction. Follows Minimalist Showcase style. Source: ReactBits
Text blur animation
Interactive Folder
An interactive, premium folder component with a playful opening animation and drifting paper elements. Features smooth CSS transitions and mouse-tracking interactions. Source: ReactBits
Dynamic Data Display
Gradient Blinds Background
A premium, minimalist showcase of the GradientBlinds background effect. Features a smooth, reactive blind-like gradient animation with spotlight effects and mouse interaction. Source: ReactBits
Lightning Background
A high-performance WebGL-powered lightning/electric discharge background effect. Features adjustable hue, intensity, speed, and scale. Built with GLSL shaders for smooth atmospheric motion. Source: ReactBits
Pastel Gradient Background
A soft, rotating pastel gradient background with blur effects and smooth animation.
Hyperspeed Background
A high-performance, Three.js-based warp speed/hyperspeed background effect with customizable distortions, colors, and motion parameters. Supports multiple presets for different visual styles. Source: ReactBits
FullScreenImageExpansion
A scroll-driven interaction where a centered featured image expands smoothly to fill the entire browser viewport as the user scrolls.
Sticky Content Switch
A split-screen section where the left-side heading remains sticky and updates dynamically as associated images scroll on the right side. Uses GSAP ScrollTrigger for precise synchronization.
Hand Drawn Underline Headline
A headline component with a cascading text effect and a hand-drawn SVG underline animation that triggers when scrolled into view.
Squares Background
An animated grid of squares background with directional movement and hover interactions. Features a customizable speed, direction, and colors with a radial vignette effect. Source: ReactBits
Faulty Terminal Background
A CRT/Terminal-style background with glitch effects, scanlines, and digital noise. Highly interactive with mouse movements and page load animations. Source: ReactBits
Text Pressure
A typography component where characters react to mouse proximity by changing weight and width using variable font axes (pressure-sensitive effect).
Text slidedown animation
Ballpit Background
A high-performance 3D physics-based background effect with interactive bouncing spheres. Features a custom shader for scattering effects, Three.js instanced rendering for performance, and responsive physics. Inspired by Kevin Levron's creative coding work. Source: ReactBits
Tilted Card
A premium tilted card component with 3D parallax effects, hover scaling, and a follow-the-cursor tooltip. Built with motion/react for smooth, physics-based interactions.
Rolodex Text
A text component that cycles through words with a 3D physical slot machine/Rolodex flip animation. Features left-aligned text for inline use and preserved 3D perspective.
Prism Background
A premium, high-performance WebGL prism/pyramid background effect using OGL. Supports multiple animation modes (rotate, hover, 3drotate) and extensive visual customization. Source: ReactBits
Shiny Text
A text component with a customizable shining gradient animation effect that sweeps across the text.
SGW - Enhanced Modal Interaction
Increase the height of the "今すぐ注文を確定する" (Confirm Order Now) submit button. Make it larger and more prominent - increase the padding and font size to make it a more substantial, clickable button that stands out more in the form.
"Spotlight" Mask
A scroll-driven interaction where a circular spotlight mask grows to reveal colorful UI content underneath a dark overlay.
Text Color Inversion
A scroll interaction component where text changes color based on the background behind it using mix-blend-mode: difference. Features a sticky text element that adapts visibility as it traverses contrasting sections.
Ribbon
A premium minimalist showcase of an interactive ribbon effect using OGL (WebGL). It features fluid, mouse-following motion with a monochrome aesthetic and subtle floating framing.
Aurora background
A WebGL-based aurora borealis effect using OGL. It creates a smooth, flowing gradient animation that simulates the northern lights.
"Parallax Tilt" Grid
A 3-column image grid with independent scroll speeds and 3D tilt effects on scroll.
Character Staggered Fade
A heading component that reveals text character by character with a blur-to-focus effect and opacity transition.
The "Sticky" Text Morph
A text component that smoothly transitions font-weight from Light (300) to Extra Bold (800) based on scroll progress using GSAP ScrollTrigger.
Fuzzy Text
A text component that renders a fuzzy/glitchy text effect using HTML5 Canvas. It supports hover effects, click interactions, and continuous glitch modes.
Letter Glitch Background
A high-end, minimalist letter glitch background effect with customizable speed, vignettes, and smooth transitions. Perfect for editorial-style hero sections or tech-focused landing pages. Source: ReactBits
Flying Posters
A high-end, high-performance WebGL-powered vertical poster gallery with 3D distortion and smooth scrolling. Uses OGL for efficient rendering and a minimalist presentation style. Source: ReactBits
Electric Border
A glowing, animated electric border effect wrapper component that uses HTML5 Canvas and noise algorithms to generate a dynamic, crackling energy field around its children. It supports customization of color, speed, chaos level, and border radius.
Text fading animation
Prismatic Burst Background
A high-performance WebGL prismatic burst background effect with customizable animation types (rotate, rotate3d, hover), ray counts, and color palettes. Optimized with OGL for smooth 60fps performance. Source: ReactBits
Gradual Blur
A production-grade gradual blur component that creates a smooth fading blur effect at the edges of a container. Perfect for scrollable areas, creating depth, and seamless content blending. Features configurable strength, direction, and exponential falloff.
Cinematic SlideUp Headline
A premium headline animation where words slide up from behind an invisible mask with a cinematic ease.
Magnet Lines
A grid of lines that rotate to point towards the cursor position, creating a magnetic field effect.
Floating Lines Background
A minimalist showcase of an interactive, shader-based floating lines background with wave-like motion and parallax effects. Source: ReactBits
Grid Distortion Background
A high-performance WebGL-based grid distortion effect for background images, featuring interactive mouse-driven liquid-like ripples. Source: ReactBits
ASCII Text
A 3D ASCII text effect using Three.js that renders text as a grid of characters with wave animations and mouse interaction.
Breathing Glow Text
A text component where specific keywords subtly glow by animating a text-shadow pulse, simulating a breathing rhythm. Uses GSAP for smooth, organic motion.
Laser Flow
A WebGL-based laser flow effect using Three.js, featuring interactive mouse trails and volumetric fog.
"Wave" Distortion
A text component that applies an SVG displacement map filter to create a gentle, liquid underwater wavy effect. Uses GSAP to animate the turbulence for organic motion.