157 React Animations, Backgrounds & Effects | Charcoal UI

157 animated backgrounds, WebGL shaders, cursor effects, text animations and image effects for React and Tailwind CSS, live. Install in one command.

Text

Text Reveal: Words rise out of a blur one after another, when the text scrolls into view.
Shimmer Text: A band of light sweeps across text. Good for loading or thinking states.
Scramble Text (Pro): Characters cycle through glyphs before locking in, left to right.
Rotating Text (Pro): Cycles through words with a rolling letter-by-letter swap, and the container eases to each width.
Typewriter: Types each word with a human rhythm, holds it, deletes it and moves on. Screen readers hear the full list once.
Gradient Text: Text filled with a slowly flowing ember gradient. CSS only.
Highlight Text (Pro): Marks a phrase as it scrolls into view: a marker sweep, a hand-drawn underline, or a scribbled circle.
Text Morph (Pro): Morphs between strings: letters shared by both glide to their new spots, and the rest blur in and out.
Split Flap (Pro): Airport departure board: every cell flips through the drum until it lands on its letter.
Scroll Text (Pro): Words light up one by one as the paragraph scrolls through the viewport.
Wavy Text (Pro): Letters hop in a wave when you hover the word, or continuously with loop.
Circular Text (Pro): Text running around a slowly turning circle, with a slot in the middle. It speeds up on hover.
Glitch Text (Pro): Two offset colour layers tear through the text in slices, on hover or always. CSS only.
Flip Words (Pro): Words flip over like a 3D board, each letter rotating a beat after the last.
Letter Swap (Pro): On hover each letter rolls up and is replaced by its twin from below, in a quick stagger.
Text Pressure (Pro): Letters thicken as the pointer approaches, like pressing into soft type. Needs a variable font.
Tech Text (Pro): A monospace heading that boots in: characters type on under a scanline with a blinking block cursor, then a highlight bar scans across once. Timing has a human jitter so it never feels like a metronome.
Masked Heading (Pro): Letters are a window onto an image or gradient that pans slowly behind them, and the heading wipes in from the left. Without an image it falls back to a drifting ember and foreground gradient.
Stroke Text (Pro): Outlined text whose stroke draws itself in, then optionally fills. The glyphs are SVG text, so size, weight and family come from className like any other word.
Depth Text (Pro): Layered 3D extruded text: stacked copies step back in perspective behind the face and the block tilts toward the pointer, so the shaded side catches the light.
Fold Text (Pro): Each line folds down into place like a hinge, from edge-on to flat, one after another as the block scrolls into view. A small spring overshoot makes it settle like a real hinge.
Echo Text (Pro): A heading that follows the pointer with echo copies trailing behind on softer springs and fading down the trail. The further an echo falls behind, the more it blurs.
Shuffle Text (Pro): Letters slide vertically through a column of alternative glyphs before settling on their own, left to right. A slot reel rather than a scramble: every glyph is real and moves as a piece.
True Focus (Pro): Every word is blurred except the one in focus, framed by four corner brackets that hop from word to word on an interval. Hovering a word pulls the focus there and pauses the hop.
Scroll Float (Pro): Characters float up and settle as the element scrolls through the viewport. Driven by scroll position, so it scrubs both ways.
Text Cursor (Pro): Copies of a word or emoji spawn along the pointer path, facing the direction of travel, then drift up and fade. Mouse only.
Curved Loop (Pro): Text repeating along a curved SVG path and scrolling like a marquee. Drag it to change its speed and direction; it eases back to cruising speed when you let go.
Warp Text (Pro): A wave of skew and scale travels through the letters of a word, once per hover or continuously.
Particle Text (Pro): Text sampled into canvas particles that fly in from random positions to form the letters, then scatter from the pointer and spring back.
Fuzzy Text (Pro): Canvas text whose edges shiver: every frame copies thin horizontal slices with a small random offset, and the jitter grows while the pointer is over it.
Falling Text (Pro): Words drop under gravity, bounce off the walls and pile up at the bottom, and can be picked up and thrown. The physics is a few lines of its own; no engine.
ASCII Text (Pro): Text drawn as a grid of ASCII characters picked by brightness, with a wave travelling through the glyph density and a brighter patch under the pointer.
Proximity Scramble (Pro): Letters within reach of the pointer cycle through random glyphs, fastest at the centre, and settle back as it moves away.
Text Spotlight (Pro): Dim text lit by a soft circle that follows the pointer: two copies of the text, the bright one clipped by a radial mask.
Liquid Text (Pro): An SVG turbulence and displacement filter makes the text wobble like a liquid surface: a slow idle, a surge under the pointer.
Text Explode (Pro): Letters fly apart with a spin on hover or click, each on its own spring, and snap back together when the pointer leaves.
Magnet Text (Pro): Each letter is pushed away from the pointer within a radius and springs back, so the word parts around your cursor like a magnet of the wrong polarity.
Kinetic Text (Pro): Rows of repeated text run in alternating directions across a slanted block, and the whole thing speeds up with the scroll velocity of the page.
Line Reveal (Pro): Lines of text rise into view inside clipped masks, one after another, the reveal every agency site opens with.
Scroll Scale Text (Pro): A heading pinned inside a tall section whose scale, letter-spacing and weight follow your scroll through it, so it grows from a whisper to a shout.

Backgrounds

Ember Field (Pro): Canvas embers drifting up from the bottom edge, flickering as they cool. The Charcoal UI signature.
Dot Grid: Dot grid whose dots swell and warm up near the pointer.
Smoke (Pro): Slow, blurred smoke plumes drifting over charcoal. Pure CSS transforms, so it stays cheap.
Aurora (Pro): Warm aurora bands drifting across the top of a section, fading into the page below.
Grid Beams (Pro): A faint grid with ember beams of light running along its lines.
Meteors (Pro): Ember streaks falling diagonally across the section. CSS only.
Grain: A film-grain overlay that removes banding from gradients, with an optional jitter.
Wave Lines (Pro): Layered sine lines drifting sideways at different speeds, with one ember line in the middle.
Ripple Rings (Pro): Sonar-style rings pulsing out from a centre, for searching, live or empty states.
Particle Network (Pro): Drifting nodes that link up when close and gather around the pointer, lines warming to ember nearby.
Flow Field (Pro): Hundreds of particles follow a slowly shifting current, leaving silky ember trails.
Shader Gradient (Pro): A WebGL mesh gradient: domain-warped noise folding three colours together, with film grain. Falls back to CSS without WebGL.
Starfield (Pro): Stars stream toward you from the centre. Press and hold to jump to warp speed.
Halftone Wave (Pro): A print-style halftone whose dots swell and shrink as interfering waves roll through.
Topographic (Pro): Slowly shifting contour lines drawn with marching squares, like a living topographic map.
Liquid Blob (Pro): Three molten ember blobs merging and splitting through an SVG gooey filter.
Pixel Rain (Pro): Columns of glyphs raining down with glowing ember heads.
Laser Flow (Pro): A laser sweeps a dark field from the top edge, bending toward the pointer, with bright packets flowing down the beam and a fog that catches its glow.
Flux Lines (Pro): A grid of short segments that flow along a drifting noise field and swing round to face the pointer, like a compass bed under a magnet.
Floating Lines (Pro): Long thin lines drift across at different depths and speeds with a slow wobble, and the near layers slide in parallax with the pointer.
Line Waves (Pro): Stacked horizontal sine waves that phase-shift over time, with the amplitude swelling toward the middle line. Plain SVG paths.
Sliced Waves (Pro): A ribbon-shaped wave cut into vertical slices; each slice lags the last and lifts on its own cycle, so the cuts ripple through in sequence.
Gradient Waves (Pro): Translucent wave bands in ember and foreground tones, each filled with a fading gradient, rolling slowly across the bottom of the box at different speeds.
Pattern Waves (Pro): A repeating pattern of dots, dashes or crosses lifted and brightened by a wave travelling across it. Dashes lean with the slope, like reeds.
Shape Waves (Pro): Rows of small circles, triangles or squares that swell and spin as a diagonal wave sweeps the grid, shrinking almost to nothing in the troughs.
Web Threads (Pro): A cobweb of threads strung between anchor points, each a curve that sags and sways and tenses toward the pointer as it passes.
Magnet Lines (Pro): A grid of short bars that turn to point at the pointer like iron filings around a magnet, each easing toward its angle so a sweep leaves a ripple of turning bars behind it.
Ghost Fibers (Pro): Faint fibre strands drift up from the bottom edge, curling as they rise and fading near the top, like smoke made of threads.
Silk (Pro): A sheet of silk: layered sine folds shaded by their slope so each fold catches light on one side, with a tint and a little film grain. WebGL, written in the file.
Grid Motion (Pro): Rows of image and text tiles on a tilted plane that slide in alternating directions as the pointer crosses the section. Rows drift on their own, so it is never frozen.
Grid Scan (Pro): A floor grid in perspective with a light bar sweeping across it; cells light up in a checkered pattern as the bar passes and fade behind it. CSS only, so it costs almost nothing.
Grid Distortion (Pro): An image sliced into a grid of cells that each sample the picture from a point pushed away from the pointer, so the image bulges around the cursor and relaxes back with a lag. Canvas 2D, idle when nothing moves.
Ripple Grid (Pro): A grid of lines that ripples outward from the pointer and from periodic pulses. Each ring pushes the vertices radially, and the lines nearest a crest take the accent colour. Canvas 2D.
Dot Field (Pro): A field of dots whose size breathes with a travelling noise wave, and that part around the pointer.
Acid Squares (Pro): A grid of squares that pulse, rotate and flicker through a shifting palette, in waves that spread from the pointer.
Shape Grid (Pro): A grid of small shapes that morph from one to the next in diagonal waves, each cell flipping as the wave passes and cells near the pointer flipping early.
Micro Slats (Pro): Thin vertical slats tilt in a travelling wave like blinds in a breeze, a tinted layer showing through as they open. CSS 3D only.
Gradient Blinds (Pro): Vertical blinds over an ember-to-foreground gradient that breathe open and closed in sequence and widen around the pointer.
Scanner (Pro): A scanning line sweeps the field with a trailing glow over a faint grid, and scattered points flash as the line reaches them. CSS only.
Radar (Pro): A radar display: rings and crosshairs, a rotating sweep with a fading wedge behind it, and contacts that light up when the sweep crosses them and decay until the next pass.
Particles (Pro): Soft points drifting upward at three depths, each with its own size, alpha and wobble. The field shifts with the pointer, deeper layers less, so it reads as space rather than a flat sheet.
Galaxy (Pro): A tilted spiral of thousands of precomputed points with a bright core and dense arms. Inner stars orbit faster than outer ones, so the arms keep winding, and the whole disc leans with the pointer.
Pixel Blast (Pro): Rings of grid-snapped pixels burst out of random points and fade, with cells dropping out as each ring ages. Clicking fires one where you clicked.
Antigravity (Pro): Motes rise as if gravity flipped, each leaving a short fading trail, and scatter away from the pointer with a push that decays as they recover. Trails are drawn by fading the canvas toward transparent, so it works on any background.
Ballpit (Pro): Balls drop into the box, bounce, settle into a heap and get shoved around by the pointer. A small circle-collision solver written for the file; no physics engine.
Hyperspeed (Pro): A perspective road rushing toward you with light streaks on both sides. Hold the pointer down to jump to hyperspeed.
Lightning (Pro): Branching bolts strike at random intervals, each one jittered segment by segment, with a flash and a fading afterglow.
Letter Glitch (Pro): A field of monospace glyphs that flicker and change colour at random, a few cells every frame, with vignettes so copy can sit over it.
Faulty Terminal (Pro): An old monitor full of glyph noise: rows scroll and flicker, bands of corruption tear across, scanlines and curved glass sit on top, and the brightness breathes.
Gradient ASCII (Pro): Two soft lights drift over a dark field drawn entirely in ASCII: each cell picks a character by the brightness under it, so the gradient becomes a swimming ramp of punctuation.
Dither (Pro): A drifting field of value noise quantised with a Bayer matrix into two tones, so light and shadow break into the ordered crosshatch of early screens, with a ripple from the pointer.
Light Rays (Pro): Volumetric rays fanning out from one edge, swaying on slow noise and leaning toward the pointer. Rendered at a fifth of the size and upscaled, so the softness is free.
Side Rays (Pro): Thin diagonal rays entering from one side and fading before the centre, each sliding along the edge on its own slow cycle, like light through blinds.
Light Pillar (Pro): Vertical pillars of light rising from the bottom edge with soft sides, a slow flicker and faint bands drifting upward. CSS only, so it idles at no cost.
Lightfall (Pro): Streaks of light falling like rain, each landing somewhere in the lower third and blooming out as it fades. Streak count scales with area.
Light Tunnel (Pro): Segmented rings flying out of a vanishing point with real perspective, twisting as they approach and pulsing as they pass the camera.
Prismatic Burst (Pro): A burst of wedge rays from a point, each one a step further round the hue wheel starting at ember, turning slowly and drifting toward the pointer.
Prism (Pro): A glass prism turning in a dark field, a white beam entering one face and a spectral streak sweeping the floor from the other. CSS 3D only.
Dark Veil (Pro): A dark veil of folding noise with light bleeding through the creases, optional scanlines and grain. WebGL, written in the file.
Orb (Pro): A glowing orb with a soft rim, a slowly turning inner swirl, a core that leans toward the pointer and a halo that brightens on hover.
Aero Shards (Pro): Translucent glass shards floating at different depths, drifting and tilting on their own cycles, the field parallaxing to the pointer by depth.
CRT Warp (Pro): A CRT screen over anything: curved glass, phosphor scanlines, a rolling band, chromatic edges and a faint flicker, with the content underneath still interactive. CSS only.
Liquid Chrome (Pro): A mirror-metal surface that folds slowly over itself, lit by a horizon band so it reads as chrome rather than noise. The pointer pushes rings into it.
Iridescence (Pro): A soft thin-film sheen: layered sine fronts interfere and map to a spectral palette anchored on your base colour. Moving the pointer tilts the film so the spectrum slides.
Plasma (Pro): The classic summed-sine plasma, folded into a two-tone palette instead of a rainbow. The pointer adds a ring source the pattern focuses on.
Plasma Wave (Pro): Horizontal plasma bands roll across the box like swells, each with a bright line along its crest and a body that fades out below.
Balatro (Pro): A swirling paint vortex of three colours folding into each other, with optional pixelation and a tilt toward the pointer. WebGL, written in the file.
Color Bends (Pro): Smooth bands of colour bending across the field like light through curved glass, flowing diagonally and bulging toward the pointer. WebGL, written in the file.
Molten Metal (Pro): A dark cooled crust with bright veins of heat crawling through its cracks: Voronoi edges warped by noise, pulsing, and warming around the pointer. WebGL, written in the file.
Liquid Ether (Pro): Ethereal wisps drifting and curling through darkness along a divergence-free curl-noise flow, two colours mixing where they meet, and a vortex around the pointer. WebGL, written in the file.
Ferrofluid (Pro): A pool of glossy black fluid that rises into spikes under a magnet that follows the pointer: a noise field thresholded against a distance field, lit with a sharp specular. WebGL, written in the file.
Nebula (Pro): Layered fractal clouds drifting slowly, lit from within in greys and the accent colour, with stars pricking through the thin parts. A Charcoal original. WebGL, written in the file.
Caustics (Pro): Underwater light: interfering bright lines drifting over a dark pool floor, the way sun looks through a wave. A Charcoal original. WebGL, written in the file.

Cursor

Cursor Trail (Pro): Ember sparks fly off the pointer, drift down and cool, scoped to one area.
Blob Cursor (Pro): A soft follower that trails the pointer and swells over links and buttons, inverting what it covers. The real cursor stays.
Spotlight Reveal (Pro): The pointer cuts a soft circle through the top layer to show the content beneath.
Image Trail (Pro): Images drop along the pointer's path, tilting slightly, then fade away.
Cursor Label (Pro): Elements with data-cursor="View" show that label in a pill that follows the pointer.
Glow Cursor (Pro): A soft radial glow follows the pointer and flares over links and buttons. Screen blending lights up what it covers instead of tinting it.
Swarm Cursor (Pro): A flock of small dots chases the pointer with simple boid rules (chase, cohesion, separation) and idles in a slow orbit when the pointer leaves. Each dot trails a short streak along its velocity.
Cursor Grid (Pro): A grid of dots, crosses or squares behind the content. Cells near the pointer light up, grow and turn to face it, then cool down slowly after it passes.
Target Cursor (Pro): Four corner brackets spin slowly around the pointer and lock onto any hovered link or button, springing to its bounds. The spin stops while locked so the brackets sit square.
Ghost Cursor (Pro): A dot follows the pointer and drags a streak of fading, shrinking copies behind it, each chasing the one ahead. Fast moves smear into a motion-blur tail; the chain stops animating once it has caught up.
Splash Cursor (Pro): Ink splashes on a canvas: soft blobs spawn along the pointer's path carrying its velocity, then slow, spread and fade like dye in water, and clicks burst a ring of them. Not a fluid simulation, so it idles for free.
Click Spark: Short lines radiate from every click and fade as they fly out. Draws only while a burst is alive.
Crosshair (Pro): A horizontal and a vertical line span the area and follow the pointer with an x, y readout. Over a link or button the pair splits into four and snaps to the element's edges, and the readout shows its size.
Pixel Trail (Pro): Square pixels light up wherever the pointer passes and fade in four discrete steps, so the trail reads as a low-resolution display rather than a blur.
Ribbons (Pro): Silk ribbons chase the pointer on a canvas, each one lagging a little behind the last and drawn as a tapered band, so a fast sweep leaves a flowing trail that runs out when the pointer leaves.
Morph Cursor (Pro): A custom cursor that morphs with what it is over: a dot in open space, a ring framing links and buttons, a text bar over copy, a soft wide circle while the mouse is held down.
Ripple Cursor (Pro): Click anywhere in the container and rings expand from the point, one after another, then fade.

Image

Parallax Image (Pro): The image drifts slower than the page inside its frame, adding depth as you scroll.
Pixelate Reveal (Pro): The image resolves from chunky pixels to full detail when it enters view. Hover to replay.
Image Reveal (Pro): A clip-path wipe uncovers the image while it settles from a slight zoom.
Zoom Lens (Pro): A magnifying lens follows the pointer over a product image.
Ken Burns (Pro): A slow, documentary-style pan and zoom that cross-fades through a set of images.
Pixel Transition (Pro): Hover or click covers the content with a grid of cells in random order, switches to the alternate content underneath, then clears the cells. Cells snap rather than fade, which is what makes it read as pixels.
Scroll Expand (Pro): A pinned section whose media starts as a small centred frame and grows to fill the viewport as you scroll, with a caption that lands once it is full. The viewport is measured from the scroll container, so it also works inside a scroll box.
Orbit Images (Pro): Images orbit a centre on concentric rings, each ring at its own speed and direction. Hovering a ring pauses it and lifts the image under the pointer.
Halftone Reveal (Pro): The image sits under halftone dots sized by the darkness beneath them, a print of the picture; hovering shrinks the dots away in a wave from where the pointer entered.
Pixel Swap (Pro): Two images swap through a grid of two-sided blocks that flip over in a diagonal wave, corner to corner, and flip back when the pointer leaves.
Dither Veil (Pro): An ordered-dither veil over the content, thinning in the classic Bayer crosshatch as the pointer approaches and clearing under it, with a little lag.
Ripple Distortion (Pro): Water over a photo: a height-field ripple simulation offsets every pixel by the local slope, so the pointer drags rings across the picture and a click drops a stone in. Canvas 2D.

Interactive

Hover Reveal List (Pro): A list of projects; hovering a row floats its image beside the pointer.
Pixel Grid (Pro): Square cells light up ember under the pointer and fade out slowly behind it.
Draggable Cards (Pro): Polaroids scattered on a table. Drag one and it lifts to the top.
Image Accordion (Pro): Image panels side by side; the hovered or focused one expands and reveals its caption.
Velocity Marquee (Pro): Big text drifting sideways that speeds up with your scroll and flips direction when you scroll back.
Stack Cards (Pro): Cards pin as you scroll and stack on top of each other, the ones underneath shrinking back.
Gooey (Pro): Liquid UI: pieces that touch melt into one another and stretch apart like goo, while text and icons stay perfectly crisp. An SVG filter plus springs, so it works with any markup.
Glare Hover (Pro): A diagonal band of light sweeps across whatever you wrap when the pointer arrives. The band is a translated layer, so nothing underneath repaints.
Sticker Peel (Pro): Any child becomes a sticker: a corner lifts on hover to show a lighter underside with a real fold shadow, and it can be dragged around its parent. The flap is the content itself mirrored across the fold line, so it works at any size.
Shape Blur (Pro): A blurred shape lives behind your content and trails the mouse on a spring, swelling while it moves and settling when it stops. Mouse only; it rests in the centre under reduced motion.
Cubes (Pro): A grid of CSS 3D cubes that tip toward the pointer and ripple outward from wherever you click. Every cube is a button, so the ripple works from the keyboard too.
Strands (Pro): Hair-like strands rooted along the bottom edge sway in a slow breeze and bend away from the pointer. Verlet chains on a canvas, so they keep their length and spring back naturally.
Meta Balls (Pro): Blobby balls drift around a box and melt together where they meet; one follows the pointer. A real metaball field summed on a low-resolution canvas, so the merge is smooth and the colour follows the theme.
Crystalized Ball (Pro): A faceted glass sphere in SVG: each cut facet is lit on its own, the pointer tilts the ball and slides a glint across it, and it turns slowly on its own.
Elastic Mesh (Pro): A grid of points on springs, coupled to their neighbours, so the pointer dents the mesh and the dent rings outward and settles.