Hyperblur terminal ver. 1.01002 items
hyperblur/
DocsEffectsComponentsBlocksTemplatesProAgents
GitHubSign inBrowse effects

Get started

  • Introduction
  • Installation
  • Agents
EffectsComponentsBlocks
All effects

Text53

  • Glitch Text
  • Motion Blur Text
  • Decode Text
  • Neon Text
  • Wave Text
  • Typewriter
  • Gradient Text
  • Split Text
  • Blur Text
  • Rotating Text
  • Scroll Velocity Text
  • Stroke Text
  • Split-Flap Text
  • Shiny Text
  • Text Scramble View
  • Text Scramble Center
  • Typewriter Human
  • Typewriter Swap
  • Text Block Wipe
  • Text Cipher Lock
  • Text Weight Wave
  • Text Letter Flip
  • Text Foil Sweep
  • Text Line Rise
  • Text Weight Trail
  • Text Path Flow
  • Text Magnetic
  • Text Roll Words
  • Text Ink Draw
  • Text Rack Focus
  • Text Swap Pill
  • Text Shatter
  • Tech Readout
  • Text Echo
  • Depth Layers
  • Text Fold
  • Text Shuffle In
  • Text Scroll Float
  • Text Scroll Words
  • Text Circular
  • Text ASCII Render
  • Text Pressure
  • Text Scramble Hover
  • Text Warp
  • Text Fuzzy
  • Text Mask Reveal
  • Text Highlight Marker
  • Text Underline Draw
  • Text Odometer
  • Text Flip Words
  • Text Fill Scroll
  • Text 3D Extrude
  • Text Liquid Gradient

Motion & reveals32

  • Speed Lines
  • Pixel Reveal
  • Shutter Reveal
  • Fade In View
  • Marquee
  • Count Up
  • Orbit Icons
  • Animated Beam
  • Ripple Grid
  • Scroll Image Reveal
  • Hero Stagger Intro
  • Ticker Vertical
  • Motion Stat SequenceNew
  • Motion Radial Grid RevealNew
  • Motion Skew MarqueeNew
  • Motion Karaoke ParagraphNew
  • Motion Flip SequenceNew
  • Motion Cutout RevealNew
  • Motion Path DrawNew
  • Motion Logo LensNew
  • Motion Ink RevealNew
  • Motion Code RevealNew
  • Edge Gradual Blur
  • Logo Loop Belt
  • Scroll Progress Bar
  • Scroll Parallax Layers
  • Scroll Pin Steps
  • Scroll Stagger Grid
  • Scroll Zoom Reveal
  • Scroll Horizontal Track
  • Scroll Counter Ticker
  • Scroll Sticky Stack

Overlays & backgrounds70

  • Scanlines
  • Grid Floor
  • Film Grain
  • VHS Overlay
  • Aurora
  • Plasma
  • Particles
  • Light Rays
  • Beams
  • Hyperspeed
  • Silk
  • Meteors
  • Mesh Gradient
  • Polar Veil
  • Flow Paths
  • Contour Lines
  • Warp Stars
  • Mesh Lattice
  • Grain Gradient
  • Grid Beams
  • Beacon Rings
  • Wave Lines
  • Bokeh
  • Spotlight Grid
  • Glow Orbs
  • Horizon Rise
  • Soft Clouds
  • Halftone
  • Metaballs
  • Flow Field
  • Voronoi Cells
  • Dot Swell
  • Glyph Rain
  • Circuit Traces
  • Liquid Chrome
  • Satin Cloth
  • Crystal Facets
  • Lightning Storm
  • Fireflies
  • Vortex Tunnel
  • Hex Pulse
  • Radar Scope
  • Helix Threads
  • Ferrofluid
  • Soft Aurora
  • Rune Rings
  • Grid Scan
  • Color Bends
  • Prism Burst
  • Faulty Terminal
  • Wave Pattern
  • Slats
  • Ghost Fibers
  • CRT Warp
  • Acid Squares
  • Scanner Sweep
  • Web Threads
  • Galaxy
  • Dark Veil
  • Silk Threads
  • Layered Waves
  • Grid Motion
  • Grid Distortion
  • Magnet Lines
  • Dot Field
  • Ripple Water
  • Liquid Ether
  • Topography
  • Light Tunnel
  • Glitch Letters

Hover & pointer37

  • Chromatic Hover
  • Magnetic
  • Tilt Card
  • Dot Grid
  • Glow Border
  • Ripple Click
  • Blob Cursor
  • Click Spark
  • Cursor Trail
  • Spotlight Card
  • Glass Card
  • Cursor Magnetic Filings
  • Cursor Trail Velocity
  • Magnetic Icon GridNew
  • Photo SnakeNew
  • Fan StackNew
  • Spotlight Border ListNew
  • Velocity Distort ImageNew
  • Morph CursorNew
  • Tilt GalleryNew
  • Reveal LensNew
  • Pin BoardNew
  • Hover Play TilesNew
  • Direction-Aware CaptionNew
  • Expanding Index RowsNew
  • Crystal Ball
  • Border Star Orbit
  • Cursor Target
  • Cursor Ghost
  • Cursor Swarm
  • Cursor Fluid Splash
  • Cursor Ribbons
  • Cursor Metaballs
  • Cursor Pixel Trail
  • Cursor Image Trail
  • Cursor Crosshair
  • Cursor Glare Grid

Transitions & slides34

  • Flip Countdown
  • Page Transition
  • Slide Show
  • Curtain Reveal
  • Morph Tabs
  • Curtain Blinds
  • Curtain Clip Wipe
  • Curtain Doors
  • Curtain Mixed
  • Curtain Iris
  • Curtain Stagger Wipe
  • Curtain Wipe
  • Transition Iris Wipe
  • Transition Diagonal Slice
  • Transition Pixel Dissolve
  • Transition Shared Morph
  • Transition Curtain Call
  • Transition Ripple Reveal
  • Transition Page Turn
  • Transition Zoom Through
  • Transition Split Flap
  • Transition Liquid Wipe
  • Transition Glitch Cut
  • Transition Parallax Slide
  • Image Wipe Slider
  • Image Mosaic Reveal
  • Image Liquid Distort
  • Image Pixelate Transition
  • Image Split Slide
  • Image Parallax Tilt
  • Image Ken Burns
  • Image Gallery Expand
  • Image Stack Swipe
  • Image Hover Zoom Lens

Buttons73

  • Shimmer Button
  • Border Beam Button
  • Liquid Button
  • Icon Morph Button
  • Confetti Button
  • Pay Button
  • Button Ink Ripple
  • Button Border Spin
  • Button Icon Slide Expand
  • Button Split Halves
  • Button Countdown Confirm
  • Button Tilt Glare
  • Button Underline Grow
  • Button Bubbles Pop
  • Button Marquee
  • Button Elastic Stretch
  • Button Goo
  • Button Equalizer
  • Button Orbit
  • Button Aurora
  • Button Wave Letters
  • Button Share Expand
  • Button Parallax Layers
  • Button Dot Matrix
  • Button Odometer
  • Button Trace
  • Button Swipe Confirm
  • Button Hold Ring
  • Button Spring Press
  • Button Submit Morph
  • Button Dots Morph
  • Button Toggle Count
  • Button Split Menu
  • Button Speed Dial
  • Button Icon Badge
  • Button Toolbar Group
  • Button Magnetic Pill
  • Button Press Radial
  • Social Login Solid
  • Social Login Outline
  • Social Login Glass
  • Social Login Icon Row
  • Social Login Icon Fill
  • Social Login Color Wash
  • Social Share Dial
  • Social Share Counter
  • Social Share Morph
  • Social Follow Count
  • Social Subscribe Bell
  • Social Follow Avatar
  • Button Hold Shred
  • Button Slide Delete
  • Button Trash Lid
  • Button Safety Cover
  • Button Type Confirm
  • Button Delete Undo
  • Button Check Draw
  • Button Shift Arm
  • Button Countdown Abort
  • Button Archive Discard
  • Button Swipe Dissolve
  • Button Irreversible
  • Specular Button
  • Button Spotlight
  • Button Slide Fill
  • Button Glitch Hover
  • Button 3D Press
  • Button Neon Pulse
  • Button Arrow Reveal
  • Button Stateful
  • Button Copy
  • Button Download Progress
  • Button Stacked Text

Loaders36

  • Loader Gears
  • Loader Hourglass
  • Loader DNA Helix
  • Loader Battery Fill
  • Loader Signal Bars
  • Loader Book Flip
  • Loader Bouncing Balls
  • Loader Rocket Trail
  • Loader Fill Text
  • Loader Line Reveal
  • Loader Jumping Dots
  • Loader Dots Pulse
  • Loader Orbit Sync
  • Loader File Morph
  • Loader Skeleton Feed
  • Loader Liquid Progress
  • Loader Tick Ring
  • Loader Dot Field
  • Loader Status Feed
  • Loader Gauge Counter
  • Loader Stack Build
  • Loader Device Scan
  • Loader Infinity Trace
  • Loader Button Progress
  • Loader Orbit
  • Loader Wave Dots
  • Loader Equalizer
  • Loader Ring Gradient
  • Loader Progress Stripes
  • Loader Percentage
  • Loader Morph Shapes
  • Loader Typing
  • Loader Radar
  • Loader Pulse Rings
  • Loader Cube
  • Loader Text Scramble

Micro52

  • Hold Button
  • Spring Toggle
  • Segmented Control
  • Tooltip
  • Scrub Field
  • Flip Card
  • Toast Stack
  • Lattice Loader
  • Star Rating
  • Context Menu
  • Rocker SwitchNew
  • Slide to UnlockNew
  • Spring StepperNew
  • Volume KnobNew
  • Reaction PickerNew
  • Copy ChipNew
  • Password EyeNew
  • Horizon ToggleNew
  • Notify BellNew
  • Quantity PickerNew
  • Half Star RatingNew
  • Progress PillNew
  • Jelly Radio
  • Spring Checkbox
  • Status Mark
  • Warm Tooltip
  • Branched Menu
  • Code Slots
  • Glide Select
  • Slide Commit
  • Elastic Slider
  • Sling Button
  • Dodge Field
  • Swipe Toast
  • Swipe Row
  • Squish Switch
  • Wake Slider
  • Rubber Segment
  • Pulse Heart
  • Bell Toggle
  • Comet Dial
  • Theme Switch
  • Gooey Toggle
  • Drawn Checkbox
  • Radio Card Group
  • Floating Label Input
  • Password Strength Input
  • Tags Input
  • Dual Range Slider
  • Number Stepper
  • Command Select
  • Inline Code Input

hyperblur · visual effects for React

A software library of React UI components and code templates. Sample screens use placeholder content only.

TermsPrivacyRefundssupport@hyperblur.dev
Effects/Loaders

Loaders

36 copy-paste items in this section.

search-index / rebuild.log
Loading

Rebuilding search index

1,284 of 3,906 documents

shard 02 / 06 · 41s

Loader Gears

Three toothed gears mesh and turn in opposite directions, each at the right speed for its tooth count.

↗
Loading

Maison Alba

Setting your table

Friday, 7:30 pm · 2 guests

Usually under a minute

Loader Hourglass

An hourglass whose sand drains through the neck, then flips over and refills for the next round.

↗
Run 4821Sequencing
Loading

Sample HG-0097

Whole genome, 30x coverage

Reads

1.2M

Quality

Q38

Time left

06:12

Loader DNA Helix

A double helix of dots twists in sine motion, with depth shading and rungs that stretch between the strands.

↗

Your devices

Fern Watch

Charging, 42 min left

Charging

Fern Buds

Fully charged

Charging 100%

Charging case

25% remaining

Charging 25%

Loader Battery Fill

A battery icon fills with segments, pulses when full and starts over. Pass a value to show a fixed charge level instead.

↗
Wi-Fi
Loading

Searching for networks

Keep your phone near the router

Home 5GSaved
Cafe GuestOpen

Loader Signal Bars

Signal bars of growing height light up one after another, like a device searching for a connection.

↗
Loading

Library

Opening The Long Meridian

Chapter 12 · 31 min left

Loader Book Flip

An open book whose pages turn one after another in 3D, then return to the right-hand stack.

↗

Lobby · Ranked duo

Finding players
AKMJRS3 of 4 ready

Loader Bouncing Balls

Three balls of different colors bounce out of phase, squashing on impact above a soft ground shadow.

↗
Loading

Deploying

hyperblur / main · 4f25fbe

✓Build

✓Tests

•Edge network

Loader Rocket Trail

A small rocket accelerates along a curved path and leaves a trail that fades behind it, then launches again.

↗
FernhillFernhillFernhill

Syncing 3 of 8 workspaces

Loader Fill Text

An outlined word that fills with color from the bottom up behind a rolling wave surface. Drive it with a value or let it loop.

↗

Report / Retention

Q3 Retention Review

Loader Line Reveal

Thin lines draw across one after another, and the title and placeholder bars beneath each line wipe in behind it as loading completes.

↗
Loading

Loading assets

212 of 480 textures

Loader Jumping Dots

Three dots hop in turn, squashing when they land and stretching in the air, with a shadow on the ground that shrinks as they rise.

↗
SK
Pulling the retention numbers now, give me a minute.
SK
Sam is typing
Reply to Sam

Loader Dots Pulse

Three dots swell and brighten one after another, with an optional text label in front, for inline waiting states.

↗
Syncing

Workspace · Northwind

Syncing your tools

Issues412
Repositories18 of 31
Design filesQueued

Loader Orbit Sync

Satellites travel tilted elliptical orbits around a sync hub, growing as they pass in front and fading behind it. The hub sends out a pulse each time a satellite comes around.

↗
Export launch kit.zip
Packing DocumentPacking

48 files · 312 MB

Press release, 21 images,

2 voice tracks, embed code

We will email the link to maya@northwind.io

Loader File Morph

A single shape morphs between a document, an image frame, an audio disc and a code hexagon, with the inner glyph crossfading at each step. Built for exports and format conversions.

↗
InboxMentionsArchive
Fetching 24 new
Loading content

Loader Skeleton Feed

Content-shaped placeholders for a post feed, an inbox or a card grid, with one diagonal shimmer that travels across every bone in order. When loading ends, the real children fade in from a soft blur.

↗

launch-film-final.mov

1.8 GB · to Campaigns / Autumn

0%0%
12.4 MB/sKeep this tab open

Loader Liquid Progress

A progress pill filled with liquid: the leading edge sloshes as a live wave and bubbles rise inside. The percentage changes color exactly where the liquid passes under it.

↗
0%Install

storefront-web

main · 8f3c2e1

Fix tax rounding on the cart page

Productionby Lena Park

Loader Tick Ring

A dial of fine ticks lights up clockwise with a brighter, longer leading tick, and phase markers around the rim switch on as each stage is reached. The center shows the percentage and the current phase.

↗

Composing voiceover

Narrator: Iris, warm · 0:42

EN-US
Loading

“Every great trip starts with a single list.”

Loader Dot Field

A grid of dots breathes in a ripple, a traveling wave or a diagonal sweep, each dot swelling and glowing as the crest passes. Reads like a voice or audio engine at work.

↗
Fix rounding in checkout totalsWorking
Working: Reading 14 files in src/checkout

Loader Status Feed

Status lines are typed out one at a time with a block caret and a spinner, then checked off with a timing as the next line scrolls in. Good for long jobs that should show what they are doing.

↗
012345678901234567890123456789%
18.4 MB/s
0100

Restore

orders-db snapshot

Nov 6, 23:00 UTC

42.7 GB · eu-west-1

Writes are paused

Loader Gauge Counter

A segmented 240 degree gauge fills with a color ramp and a glowing tip while an odometer of rolling digits counts up in the center. Leading zeros stay dimmed like an instrument panel.

↗
0 / 5 layersBuilding

api:2.14.0

FROM node:22-alpine

COPY package*.json ./

RUN npm ci --omit=dev

COPY . .

RUN npm run build

Loader Stack Build

Isometric slabs drop one by one onto a stack, landing with a small squash, while a dashed outline marks where the next one goes. When the stack is complete it lifts away and the build starts over.

↗
Add a speakerLiving room
0 devices foundScanning

Hold the pairing button for 3 seconds

Loader Device Scan

A half-dial sonar sweeps back and forth with a fading wake, and nearby devices light up the moment the beam crosses them. A live count shows how many have been found.

↗
Live board · Q4 roadmap3 editors
Reconnecting

Reconnecting

Attempt 3 of 5

Your edits are saved locally

Loader Infinity Trace

A bright head races around a figure eight, dragging a layered tail that fades and blurs behind it. Fits reconnecting and retrying states where the wait has no known end.

↗

Ready to ship v2.14.0

7 commits · checks passed

12/12
Target
Production

Loader Button Progress

A button that collapses into a thin progress bar on click, with the status and percentage riding above it. At 100 percent it grows back into a success pill and draws a check.

↗
Loading

Syncing workspace

Pulling 3 sources into Northwind

  • Calendar
  • Documents
  • Issues, 214 of 380

Loader Orbit

Three glowing dots travel around concentric rings at different radii and speeds, with a beating core in the middle.

↗
best espresso grinder
Under $200BurrElectric
Searching 2,400 reviews

Loader Wave Dots

A row of dots rides a sine wave while a color sweep runs through them from the first dot to the last.

↗

Midnight Drive

Velvet Static

Loading
1:42
Buffering

Loader Equalizer

Audio-style bars bounce out of phase with their own rhythm. Good for buffering, streaming and listening states.

↗
Loading

Processing payment

Visa ending 4242 · $128.40

Keep this window open

Loader Ring Gradient

A conic gradient ring with a glowing head that spins while the whole ring breathes in and out.

↗

brand-assets-v3.zip

48.2 MB · Design team

Uploading, 31 of 48 MB64%
Uploading, 31 of 48 MB
Cancel

Loader Progress Stripes

A determinate progress bar with moving stripes, a soft glint at the leading edge and a tabular percentage.

↗
0%Loading

Installing update

Hyperblur Desktop 2.4.0

  • Downloaded
  • Verified
  • Installing

Loader Percentage

A large percentage counter inside an SVG ring that fills as it counts. Pass a value, or leave it out to run a looping demo.

↗
Loading

Building your workspace

Templates, roles and a sample project.

Step 2 of 3~10 s

Loader Morph Shapes

A single gradient shape morphs from a circle to a rounded square to a triangle and back, turning as it goes.

↗
#design-crit· 4 online
JKPushed the new tokens, can you check?
On it, one sec
PNPriya NairPriya Nair is typing

Loader Typing

A chat typing indicator with three hopping dots in a bubble, plus an optional avatar and sender name.

↗
Loading

Scanning nearby

  • Studio Display-42 dBm
  • Maya's iPhone-58 dBm
  • Kitchen speaker-71 dBm

Loader Radar

A radar sweep rotates over concentric rings and lights up blips as it passes over them, at the same positions every time.

↗
Loading

Finding a match

Ranked Duo · est. wait 0:25

Loader Pulse Rings

Concentric rings expand from a core icon and fade out, staggered so there is always a pulse in flight.

↗
chair_v2.glb3.4 MB
Loading

Optimizing 128k triangles

Loader Cube

A translucent CSS 3D cube turns on its vertical axis above a soft shadow that breathes with the rotation.

↗
~/northwind
$ npm run build> next buildCompiled 42 modules>LoadingLoading

Loader Text Scramble

A word scrambles through random glyphs and resolves letter by letter, holds for a moment and starts over. Monospace, with a blinking cursor.

↗
Previous sectionButtonsNext sectionMicro