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

Get started

  • Introduction
  • Installation
  • Agents
EffectsComponentsBlocks
All blocks

Hero sections50

  • Hero Section
  • Hero Dot Globe
  • Hero Dot Earth
  • Hero Dot Saturn
  • Hero Dot DNA
  • Hero Dot Orbit
  • Hero Dot Galaxy
  • Hero Dot Torus
  • Hero Dot Wave
  • Hero Dot Text
  • Hero Dot Logo
  • Hero Dot Silhouette
  • Hero Dot Worldmap
  • Hero Dot Brain
  • Hero Dot Head
  • Hero Dot Hand
  • Hero Scroll Expand
  • Hero Scroll Morph
  • Hero Scroll Horizontal
  • Hero Scroll Letters
  • Hero Scroll Curtain
  • Hero Scroll Stack
  • Hero Scroll Mask
  • Hero Scroll Ring
  • Hero Scroll Wipe
  • Hero Scroll Timeline
  • Hero Scroll Split
  • Hero Scroll Depth
  • Hero Prism
  • Hero Glass Orbs
  • Hero Stage Light
  • Hero Kinetic
  • Hero Devices
  • Hero Gradient Sphere
  • Hero Terminal
  • Hero Card Wall
  • Hero Live Metrics
  • Hero Aurora Lit
  • Hero Light Ribbon
  • Hero Swiss
  • Hero Editorial
  • Hero Orbs
  • Hero Prompt
  • Hero Spotlight
  • Hero Particles
  • Hero Beams
  • Hero Aurora
  • Hero Grid
  • Hero Product
  • Hero Type

Features12

  • Features Section
  • Features Sticky SwapNew
  • Features Live TabsNew
  • Features Hover RevealNew
  • Features Diagonal FlowNew
  • Features Mini UINew
  • Features Before AfterNew
  • Features Grid Glow
  • Features Alternating
  • Features Tabs
  • Features Checklist
  • Features Orbit

Bento12

  • Bento Live WidgetsNew
  • Bento Hero SatellitesNew
  • Bento Hover ExpandNew
  • Bento Scan SweepNew
  • Bento ShuffleNew
  • Bento Tilted PlaneNew
  • Bento Product
  • Bento Metrics
  • Bento Integrations
  • Bento Terminal
  • Bento Editorial
  • Bento Spotlight

Social proof12

  • Testimonials Section
  • Case Study Cards
  • Live Activity Proof
  • Proof Tilted WallNew
  • Proof Avatar OrbitNew
  • Proof Logo DockNew
  • Proof Video GridNew
  • Proof Review TickerNew
  • Proof Wall
  • Proof Spotlight Quote
  • Proof Logo Cloud
  • Proof Metrics Quotes

Contact9

  • Contact Booking Calendar
  • Contact Chat Widget
  • Contact Route MapNew
  • Contact Channel PickerNew
  • Contact Office PostcardsNew
  • Contact Split Form
  • Contact Offices
  • Contact Support Cards
  • Contact Minimal Light

Footers11

  • Footer Newsletter First
  • Footer App Download
  • Footer Reveal Under
  • Footer Pointer WordmarkNew
  • Footer Newsletter GroupsNew
  • Footer Single LineNew
  • Footer Sitemap StatusNew
  • Footer Mega
  • Footer Giant Wordmark
  • Footer CTA Sitemap
  • Footer Links Rail

Comparison6

  • Comparison Tiers
  • Comparison Scorecard
  • Comparison Calculator
  • Comparison Table
  • Comparison Versus
  • Comparison Slider

Navigation27

  • Nav Tab Bar
  • Nav App Header
  • Nav Side Dock
  • Navbar Prism Glass
  • Navbar Morph Underline
  • Navbar Magnetic
  • Navbar Spotlight
  • Navbar Scroll Shrink
  • Navbar Mega Preview
  • Navbar Command
  • Navbar Hamburger Morph
  • Navbar Banner Stories
  • Navbar Split Logo
  • Navbar Floating Capsule
  • Navbar Vertical Rail
  • Navbar Tabs Stretch
  • Navbar Search First
  • Navbar Bottom Notch
  • Navbar Commerce Rows
  • Navbar Theme Reveal
  • Navbar Hero Fill
  • Navbar Dock Stacks
  • Navbar Breadcrumb Switcher
  • Nav Mega Menu
  • Nav Floating Island
  • Nav Sidebar Mobile
  • Nav Announce Split

Cinematic pages14

  • Cinema Title Card
  • Cinema Trailer Slam
  • Cinema Credits Roll
  • Cinema Aperture Open
  • Cinema Light Leak
  • Cinema Projector Intro
  • Cinema Depth Fog
  • Cinema Split Reveal
  • Cinema Countdown Leader
  • Cinema Subtitles
  • Cinema Dolly Zoom
  • Cinema Chapter Select
  • Cinema Now Showing
  • Cinema Marquee Sign

Auth30

  • Login Card
  • Auth Tilt Spotlight
  • Auth Split Assemble
  • Auth Aurora Glass
  • Auth Passkey Handshake
  • Auth Magic Flight
  • Auth Social Orbit
  • Auth Status Rail
  • Auth Lock Reveal
  • Auth Flow OTP Verify
  • Auth Flow Reset Password
  • Auth Flow Two-Factor Setup
  • Auth Flow New Device
  • Auth Flow Signup Wizard
  • Auth Flow Lock Screen
  • Auth Flow Team Invite
  • Login Glass Card
  • Login Passkey
  • Login Social First
  • Login Minimal Line
  • Login Forgot Password
  • Login Reset Password
  • Login Two-Factor Choice
  • Login Account Chooser
  • Login Terminal
  • Login Onboarding Profile
  • Auth Split Brand
  • Auth Signup Steps
  • Auth OTP
  • Auth Magic Link

Call to action10

  • CTA Banner
  • CTA Rotating Band
  • CTA Sticky Dock
  • CTA Magnetic OrbNew
  • CTA Live Preview FormNew
  • CTA Benefit PlaneNew
  • CTA Terminal InstallNew
  • CTA Gradient Card
  • CTA Marquee Band
  • CTA Split Light

FAQ10

  • FAQ Section
  • FAQ Chat Thread
  • FAQ Flip Cards
  • FAQ Topic IconsNew
  • FAQ Scroll IndexNew
  • FAQ Branching ChatNew
  • FAQ Category DeckNew
  • FAQ Search
  • FAQ Two Column
  • FAQ Categories

Pricing17

  • Pricing Section
  • Pricing Seats Slider
  • Pricing Feature Table
  • Pricing Toggle Burst
  • Pricing Usage Calculator
  • Pricing Spotlight Grid
  • Pricing Matrix Sticky
  • Pricing Tier Carousel
  • Pricing Ribbon Highlight
  • Pricing Enterprise Contact
  • Pricing Credit Stack
  • Pricing Seat Stepper
  • Pricing Single Plan
  • Pricing Switch
  • Pricing Slider
  • Pricing Compare Cards
  • Pricing Credits

Stats11

  • Stats Mosaic
  • Stats Before After
  • Stats OdometerNew
  • Stats Scrub BandNew
  • Stats Arc GridNew
  • Stats VersusNew
  • Stats MilestonesNew
  • Stats Counters
  • Stats Bar Race
  • Stats Radial
  • Stats Ticker

404 pages8

  • 404 Maze
  • 404 Apology Letter
  • 404 OrbitNew
  • 404 Terminal ShellNew
  • 404 Glitch
  • 404 Astronaut
  • 404 Search
  • 404 Broken Plug

Profile8

  • Profile Settings Card
  • Profile Team Presence
  • Profile Resume Timeline
  • Profile Creator StatsNew
  • Profile Dev SkylineNew
  • Profile Header Card
  • Profile Creator Bio
  • Profile Dev Card

About9

  • About Team Filter
  • About Timeline Scroll
  • About Mission Split
  • About Press Wall
  • About Growth TimelineNew
  • About Values MotifsNew
  • About Team TimezonesNew
  • About Story
  • About Values

Waitlist8

  • Waitlist Inline Pill
  • Waitlist Referral Board
  • Waitlist Teaser Unlock
  • Waitlist Capacity Countdown
  • Waitlist Queue TicketNew
  • Waitlist Referral LadderNew
  • Waitlist: Live Counter
  • Waitlist: Launch Card

Showcase9

  • Showcase Bento Gallery
  • Showcase Before After
  • Showcase Device Tabs
  • Showcase Cursor PreviewNew
  • Showcase Case RailNew
  • Showcase Device GalleryNew
  • Showcase Browser
  • Showcase Device Stack
  • Showcase Marquee Cards

How it works9

  • Stepper With Screens
  • Dashed Path Steps
  • Steps CircuitNew
  • Steps Story TabsNew
  • Steps Scroll RulerNew
  • How It Works: Steps Line
  • How It Works: Sticky Scroll
  • How It Works: Vertical Timeline
  • How It Works: Flow Diagram

Download8

  • Download Changelog
  • Download Requirements
  • Download QR Handoff
  • Download OS HubNew
  • Download Version TableNew
  • Download: Platforms
  • Download: App Badges
  • Download: Install Tabs

Blog8

  • Newsletter Issue List
  • Blog Category Tiles
  • Blog Reading TimeNew
  • Blog Magazine GridNew
  • Blog Featured Grid
  • Blog List Editorial
  • Blog Article Header
  • Blog Carousel

Ecommerce9

  • Product Reviews
  • Category Mosaic
  • Order Tracking
  • Shop Spin ConfiguratorNew
  • Shop Filter ChipsNew
  • Shop Product Detail
  • Shop Cart Summary
  • Shop Collection Hero
  • Shop Checkout Steps

Checkout & billing10

  • Checkout One Page
  • Checkout Split Summary
  • Checkout Stepper Card
  • Checkout Mobile Sheet
  • Checkout Subscription Upgrade
  • Checkout Success Receipt
  • Checkout Payment Failed
  • Checkout Billing Settings
  • Checkout Invoice History
  • Checkout Pricing Modal

Local business8

  • Local Booking Card
  • Local Menu Board
  • Local Hours and Map
  • Local Team Grid
  • Local Services Price List
  • Local Reservation Bar
  • Local Before and After
  • Local Reviews Wall

Menus & ordering13

  • Menu Photo Rail
  • Menu Dietary Filter
  • Menu Specials Today
  • Menu Photo Cards
  • Menu Brunch List
  • Menu QR Table
  • Menu Drinks Cafe
  • Menu Tasting Courses
  • Menu Delivery Order
  • Menu Burger Board
  • Menu Pizza Sizes
  • Menu Chalkboard
  • Menu Combo Builder

hyperblur · visual effects for React

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

TermsPrivacyRefundssupport@hyperblur.dev
Blocks/Auth

Auth

30 copy-paste items in this section.

Welcome back

Sign in to your account to continue.

or
Forgot password?

Don't have an account?Sign up

Login Card

A centered sign-in card with social buttons, floating-label fields, error alert, loading state and sign-up link.

↗
Northbeam

Welcome back

Sign in to pick up where your team left off. New here? Create an account

or with email
Forgot?

Protected by device checks and rate limiting.

Auth Tilt Spotlight

A sign-in card that tilts toward the pointer in 3D, with a rotating conic border and a spotlight that follows the cursor across the surface. Includes SSO, email and password with validation, a loading sweep and a drawn success check.

↗
StratumLayer 2 of 3

Identity confirmed. Checking the second layer.

Sign in to Stratum

Your infrastructure, layered and accounted for. Pick up from your last deploy.

Forgot password?

No account yet? Start for free

Auth Split Assemble

A split sign-in section whose isometric illustration responds to the form: three floating slabs drop and lock together as the email and password become valid, and a beam lights the stack on success. Captions and progress pips follow each step.

↗
PolarisSecure connection

Sign in under the lights

Welcome back. Your workspace syncs the moment you arrive.

Forgot password

New to Polaris? Request access

Auth Aurora Glass

A frosted glass sign-in card under drifting aurora curtains whose colors react to the form: one hue for the email field, another for the password, amber when Caps Lock is on and green on success. Floating labels, a stay-signed-in switch and a status line complete it.

↗
MOMaya Okaformaya@lumen.dev

Looking for your passkey

Asking your browser for a passkey saved for this site.

  1. Request challenge
  2. Sign with MacBook Pro
  3. Verify signature

Lost your device?

Auth Passkey Handshake

A passkey sign-in built around a dial of sixty ticks: a sweep while the browser looks for a passkey, a draining countdown ring while you confirm on your device, then every tick lights up as the signature is verified. A live checklist shows each step of the ceremony.

↗
Parcel
1
login@parcel.appInbox

Sign in with a link

Enter your email and we will send a one-tap sign-in link. No password to remember.

Links expire after 15 minutes and work once. We will never ask for your password by email.

Auth Magic Flight

A dark magic link sign-in where the letter folds into an envelope and flies along a dotted route into an inbox tray that catches it and shows a badge. The sent state has a live expiry bar, an Open mail button and a resend cooldown.

↗

One tap and you are in

Pick the account you already use. We only read your name, email and avatar.

By continuing you agree to the Kite Terms and Privacy Policy.

Auth Social Orbit

A social-first sign-in where provider buttons circle the brand mark on a slow orbit that pauses on hover. Pointing at a provider draws a beam to the center, tints the scene and morphs the main button to Continue with that provider.

↗
Relaybase

Sign in to Relaybase

Every step of your sign-in is checked in the open. Watch the rail as you go.

Forgot?
Live statusAll systems normal
  1. Edge region22 ms
    Connected to fra1 Frankfurt
  2. Workspaceacme.com
    SAML single sign-on is required for acme.com
  3. CredentialsSSO
    Handled by your identity provider
  4. Devicetrusted
    Recognized MacBook Pro, Lisbon
  5. Session
    Starts when you sign in

Auth Status Rail

A sign-in card with a live status rail beside the form: edge latency with a moving sparkline, workspace detection that switches to SSO for known domains, password policy, device trust and session issuance, each lighting up as you type.

↗

Unlock finance vault

Confirm it is you to see balances, cards and shared files.

DR
Daniel Reyesdaniel@harbor.co

2 pins left to set

Auth Lock Reveal

A vault unlock screen with a cutaway pin-tumbler padlock: each typed character sets a pin at the shear line, a key slides in on submit and the shackle springs open to reveal the vault contents. Wrong or short passwords shake the lock.

↗
Step 2 of 2

Enter the code we sent

We texted a 6-digit code to +1 (415) ••• ••82. It expires in 10 minutes.

4291
Paste the code or type it. It checks itself when complete.
Wrong number? or press Esc

Auth Flow OTP Verify

A one-time code screen built on a single native input under a segmented rail: digits drop into their slots, a glowing bar glides to the next one and the code checks itself when complete. A delivery switch for text, email or call, a depleting resend ring, attempt limits and a verifying sweep complete the flow.

↗
Link valid for 14:52

Choose a new password

Resetting the password for maya.chen@northwind.io. Every other session is signed out once you save.

  • Lowercase letters
  • Uppercase letters
  • Numbers
  • Symbols and spaces
WeakFairStrongExcellent
99bitsExcellent · cracked in ~999 million years
Passwords match

Auth Flow Reset Password

A reset screen that measures strength in bits of entropy on a calibrated track and shows the password's makeup as colored tiles without revealing a character. It warns about reused or common passwords, points to the exact character where the confirmation differs, counts down the reset link and ends by listing the sessions it signed out.

↗

Turn on two-factor authentication

  1. 1Scan
  2. 2Verify
  3. 3Save codes

Scan with your authenticator

Open your authenticator app, tap add account and point the camera at the code. It links Northwind to maya.chen@northwind.io.

1PasswordAuthyGoogle Authenticator
JBSW Y3DP EHPK 3PXP NW4Q K7ZL
Can't scan? Type the key instead.

Auth Flow Two-Factor Setup

A three-step authenticator setup: a scannable-looking code grid that ripples in with a scan line and a copyable setup key, a code check beside a ring synced to the 30-second window, and blurred backup codes that must be revealed and confirmed as stored before finishing.

↗
New sign-in attempt

Is this you signing in from Berlin?

Usual · Lisbon, PTBerlin, DE2,312 km from your usual sign-in
Device
MacBook Air
Browser
Chrome 131 on macOS
IP address
84.17.46.203
Time
Today, 9:41 AM

Match the number

Your MacBook Air is showing a two-digit number. Tap the same one here to let it in.

Not sure? Don't guess. Block it instead.

Auth Flow New Device

A new sign-in review with a dotted map that traces an arc from the usual location to the new one, device facts and a number-matching challenge: tap the number shown on the other device to approve it. Blocking the attempt plays a checklist of the lockdown steps taken.

↗

Create your Ledgerline account

4/5
4

Pick all that apply. Press the number keys to toggle.

or press Enter ↵
LedgerlineMember
AL
Ada Lovelaceada@enginehouse.co
engine-house.ledgerline.app
Product roadmapsSprint planning
not set

Auth Flow Signup Wizard

A one-question-per-screen sign-up that slides each question in with a blur, advances on Enter and toggles choices with number keys. Beside it a member pass builds itself live from the answers, with a gradient avatar, workspace address, chosen uses and a stamp when the account is created.

↗
Northwind Workstation82%

Saturday, November 7

01234567890123456789:01234567890123456789

MC

Maya Chen

maya.chen@northwind.io

Auth Flow Lock Screen

A device-style lock screen with rolling clock digits over a layered dusk wallpaper. Unlocking opens a frosted PIN pad that accepts the keyboard, shakes on a wrong PIN, locks out with a countdown ring after too many tries, and lifts away with an opening shackle on success.

↗
A

Jordan Reyes invited you to join

Atlas Robotics
JRPNLBAS+2

Bring your teammates

Paste a list or type emails. People outside atlasrobotics.com join as guests.

LFlena.fischer@atlasrobotics.comDdev@contractorhub.ioExternalOHomar.haddad@atlasrobotics.com
Press Enter or comma to add. Click a role to change it.
Seats on your plan10 of 12

From atlasrobotics.com

  • CMchloe.martin@atlasrobotics.com

Auth Flow Team Invite

An invite acceptance that starts from a ticket with the inviter and member stack, creates the account with the email already verified, then turns into a token field for inviting teammates. Emails become chips with a role switch and an External tag, a seat meter fills as you add people, and sent chips fly into the member stack.

↗

Welcome back

Sign in to pick up where your team left off.

or with email
Forgot password?

New to Lumen? Create an account

Login Glass Card

A frosted sign-in card floating over a slowly drifting mesh gradient and glassy orbs, with provider buttons, email and password fields, validation and a success state.

↗
Passwordless by default

Sign in with a touch

Your passkey lives on this device and unlocks Ledgerly with Touch ID, Face ID or your screen lock. Nothing to remember, nothing to phish.

MacBook Pro · last used 2 days ago

Forgot password?
What is a passkey?
Status Ready

Login Passkey

A passkey-first sign-in with a large fingerprint that traces its ridges while a scan line sweeps, a Use passkey button with waiting and success states, and a password form that expands smoothly as a fallback.

↗

Sign in to Parcel

Pick the account you use at work. We'll match you to your team's workspace automatically.

or use email

No account yet? Start a free trial
By continuing you agree to the Terms and Privacy Policy.

Login Social First

A light sign-in page that leads with a grid of provider buttons with generic glyphs and a Last used badge, then an email and password form below a divider.

↗
Folio

Good to see you again.

Your drafts, notes and reading list are right where you left them. Sign in to keep writing.

Forgot?
No account? Create one

Login Minimal Line

An ultra-minimal sign-in on warm paper: a large serif greeting whose words rise in, underline fields with floating labels that draw an ink line on focus, and a pill submit button.

↗

Reset your password

Enter the email linked to your Harbor account and we'll send you a secure link to choose a new password.

Back to sign in

Login Forgot Password

A forgot password card with an animated envelope: enter an email, and it opens to show the letter, masks the address and starts a resend countdown.

↗

Choose a new password

You're resetting the password for jordan.ellis@tidewater.io.

StrengthFair

Requirements

4 of 5 met

  • At least 12 characters, met
  • Upper and lowercase letters, met
  • At least one number, met
  • At least one symbol, not met
  • Not a common password, met
Time to crackabout 4 months

Login Reset Password

A new password form with a four-segment strength meter, a rules checklist that ticks off as you type, a time-to-crack estimate, confirmation matching and a success state.

↗
Two-step verification

Confirm it's you

Your Atlas workspace requires two-step verification. Choose how you want to receive your code this time.

  1. 1Choose a method
  2. 2Verify
  3. 3Signed in
How do you want to verify?
Use a recovery code

Login Two-Factor Choice

A two-step verification screen with method radio cards for authenticator app, text message and security key, a step tracker, and a second step that shows the matching code input or key prompt.

↗

Choose an account

to continue to Relay

This Mac is remembered · Lisbon, PT
  • IDInês DuarteLumacraftines@lumacraft.studioSigned in
  • IDInês DuartePersonalines.duarte@fastmail.comSigned out
  • OTOps TeamNorthwindops@northwind.coSigned out
  • Use another accountSign in with a different email
↑↓ to move↵ to continue

Signing in shares your name, email and photo with Relay.

Login Account Chooser

A choose-an-account screen with gradient avatars, workspace badges and signed-in dots, full arrow key navigation, a remembered device chip, a Use another account row and a remove mode.

↗
~/ forge cli

Sign in from your terminal

Authorize the Forge CLI with a one-time device code. No passwords in your shell history, and you can revoke the session any time.

  1. Run forge auth login in any project.
  2. Open forge.dev/device and enter the code.
  3. Approve the request. The CLI picks it up instantly.
zsh · ~/code/northwind
$ forge auth login? How would you like to authenticate? Login with a web browser! First copy your one-time code:
WDJB-MJHT
- Press Enter to open forge.dev/device in your browser...Waiting for approval in your browserexpires in 15:00

Login Terminal

A developer sign-in told as a terminal session: prompt lines type in, a one-time device code appears with a copy button, a pulsing waiting line counts down to expiry, plus a token form for headless machines.

↗
Welcome to Northwind

Set up your profile

Step 3 of 3
  1. Profile
  2. Role
  3. Interests
MO

Mara Okafor

Designer at Northwind

Design systemsMotionAccessibility
Local timeLisbon, GMT+0TeamsDesign, Growth
What are you into?

Choose 3 or more. 3 selected.

Login Onboarding Profile

A first-run profile setup in three steps with a progress bar: gradient avatar picker and name, a role chip, interest chips with a minimum, a live profile preview and a confetti finish.

↗
Lumen

Every release, one calm place to ship it.

  • 4,200 teams
  • 99.99% uptime
  • SOC 2 Type II
“We moved 38 services onto Lumen in a weekend. Release day went from a war room to a Slack message.”
PRPriya RamanHead of Platform, Fernhill

Welcome back

New to Lumen? Start a free trial

or continue with email
Forgot password?

Protected by single sign-on and hardware key support.

Auth Split Brand

A full-width sign-in section: a brand panel with a drifting gradient and rotating customer quotes on one side, a complete email and password form with social buttons on the other.

↗
14-day free trial, no card required

Set up Relay in three short steps

Create your account, name your workspace and bring your team. It takes about two minutes.

Relay
  1. 1Account, current stepYour name, email and a password.
  2. 2WorkspaceName it and pick your address.
  3. 3Invite teamBring teammates in, or skip for now.

Already on Relay? Sign in

Step 1 of 3

Create your account

Your name, email and a password.

Strength: Too short0 characters

Auth Signup Steps

A three-step sign-up wizard for account, workspace and team invites, with a progress rail, sliding step transitions and validation on every step.

↗

Check your phone

We sent a 6-digit code to +1 (415) ••• ••92. Change

Didn't get a code?Resend available in 0:30

No signal? Use an authenticator app

Auth OTP

A verification screen with single-digit code inputs that auto-advance, accept a pasted code and step back on Backspace, plus a resend countdown, an error shake and a success check.

↗
No password to rememberLink expires in 15 minutesWorks on every device
Northwind

Sign in with a link, not a password

Enter your work email and we'll send you a secure link that signs you in instantly.

Links expire after 15 minutes.Use single sign-on

Check your inbox

We sent a sign-in link to your email. It expires in 15 minutes.

Auth Magic Link

A light passwordless sign-in: an email field that morphs into a Check your inbox state with an envelope that folds shut, a resend countdown and a change email action.

↗
Previous sectionCinematic pagesNext sectionCall to action