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

Get started

  • Introduction
  • Installation
  • Agents
EffectsComponentsBlocks
All components

Components53

  • Dock
  • Pill Nav
  • Accordion
  • Carousel
  • Stepper
  • Image Compare
  • Masonry
  • Animated List
  • Bento Grid
  • Gallery Showcase
  • Gallery Archive
  • Gallery Backstage
  • Gallery Grid Expand
  • Gallery Coverflow
  • Gallery Filmstrip
  • Gallery Rail Hang
  • Gallery Coverflow Lights
  • Gallery Scatter
  • Gallery Runway
  • Carousel Lightbox
  • Carousel Page Count
  • Carousel Scrubber
  • Card Stack Expand
  • Animated Todo List
  • Shared Layout Modal
  • Direction Switch
  • Image Accordion Reel
  • Image Accordion Vertical
  • Image Accordion Stagger
  • Parallax Depth Cards
  • Parallax Sticky Captions
  • Parallax Floating Gallery
  • Card Foil Pass
  • Card Hand Fan
  • Card Flip Deck
  • Gallery Infinite Spiral
  • Carousel Depth
  • Wheel Option Picker
  • Menu Staggered
  • Nav Card Expand
  • Card Border Glow
  • Bento Pointer Glow
  • Gooey Nav
  • Card Glare
  • Profile Holo
  • Pixel Hover
  • Card Decay
  • Sticker Peel
  • Bounce Stack
  • Chroma Grid
  • Gallery Accordion
  • Drift Wall
  • Stack Drag

Website elements16

  • Navbar Glass
  • Footer Columns
  • Announcement Bar
  • Cookie Banner
  • Newsletter Signup
  • Breadcrumbs
  • Pagination
  • Dialog Modal
  • Dropdown Menu
  • Dropzone
  • Empty State
  • Skeleton
  • Table of Contents Scrollspy
  • Promo Modal
  • Hotspot Tour
  • Announcement Ticker

Charts18

  • Sparkline
  • Stat Card
  • Bar Chart
  • Area Chart
  • Donut Chart
  • Radar Chart
  • Heatmap Calendar
  • Funnel Chart
  • Gauge Meter
  • Multi-line Chart
  • Progress Rings
  • Ranked Bars
  • Candlestick Chart
  • Chart Line Graph
  • StreamgraphNew
  • Sankey FlowNew
  • Zoomable TreemapNew
  • Bullet Chart ScorecardNew

Lists & tables16

  • Data Table
  • People List
  • File List
  • Leaderboard
  • Transaction List
  • Inbox List
  • Product Grid
  • Sortable List
  • List Timeline Vertical
  • List Notifications Grouped
  • List Pinned Reorder
  • List Expandable Rows
  • Sortable Accounts TableNew
  • Windowed Activity FeedNew
  • Grouped Task List with HandlesNew
  • Filterable Activity TimelineNew

Sidebars22

  • Sidebar Nav
  • Sidebar Floating
  • Sidebar Rail
  • Sidebar Docs
  • Sidebar Workspace
  • Sidebar Drawer
  • Sidebar Tree
  • Sidebar Mail Folders
  • Sidebar Chat Channels
  • Sidebar Icon Labels
  • Sidebar Sections Accordion
  • Sidebar Settings Nav
  • Sidebar Resizable
  • Menu Side Push
  • Sidebar Accordion Rail
  • Sidebar Fisheye
  • Sidebar Glass Aurora
  • Sidebar Command
  • Sidebar Quick Find
  • Sidebar Account Card
  • Sidebar Flyout Rail
  • Menu Side Bottom Sheet

Dashboards14

  • Analytics Dashboard
  • Sales Dashboard
  • Project Dashboard
  • Finance Dashboard
  • Admin Dashboard
  • Orders Dashboard
  • Crypto Portfolio Dashboard
  • HR People Dashboard
  • Customer Support Dashboard
  • Marketing Campaigns Dashboard
  • Compact Analytics OverviewNew
  • Ops Monitoring WallNew
  • Sales Pipeline BoardNew
  • Personal Finance SummaryNew

App UI16

  • Command Palette
  • Activity Feed
  • Notification Bell
  • Tabs Underline
  • Kanban Board
  • App Settings Page
  • App Notifications Center
  • App Calendar Month
  • App File Manager
  • App Chat Inbox
  • App Profile Editor
  • App Onboarding Checklist
  • App Calendar WeekNew
  • App File ExplorerNew
  • App Notification GroupsNew
  • App Appearance SettingsNew

Agent kit18

  • Streaming Text
  • Chat Thread
  • Tool Call Card
  • Thinking Indicator
  • Prompt Bar
  • Agent Steps
  • Agent Trace Timeline
  • Agent Approval Card
  • Agent Memory Panel
  • Agent Model Picker
  • Agent File Diff
  • Agent Composer with Attachments
  • Prompt Box Modes
  • Prompt Voice Recorder
  • Prompt Slash Commands
  • Agent Run LanesNew
  • Agent Tool PermissionNew
  • Agent Memory ScopesNew

Social & feedback15

  • Like Burst
  • Review Card
  • Avatar Stack
  • Share Row
  • Rating Summary
  • Like Heart Fill
  • Like Thumbs Pop
  • Like Reaction Picker
  • Like Star Favorite
  • Like Bookmark
  • Follow Button
  • Vote Arrows
  • Share Popover
  • Share Sheet
  • Share Floating Rail

Modals & popups24

  • Zoom Origin Dialog
  • Snap Bottom Sheet
  • Stacked Side Sheet
  • Fullscreen Reveal Menu
  • Session Timeout Alert
  • Transfer Confirm Dialog
  • Create Project Dialog
  • Zoom Lightbox
  • Chapter Video Modal
  • Nested Command Modal
  • Onboarding Stepper Modal
  • Success Check Modal
  • Rich Popover
  • Hover Profile Card
  • Newsletter Envelope Popup
  • Cookie Preferences
  • Exit Intent Popup
  • Promo Countdown Popup
  • Upgrade Limit Prompt
  • Tour Spotlight
  • What's New Stories
  • Radial Context Menu
  • Island Notification
  • Share Access Dialog

Forms & inputs24

  • Card Number Field
  • Phone Field with Country
  • Date Picker
  • Date Range Picker
  • Async Combobox
  • Autosize Textarea
  • File Drop Upload
  • Color Picker
  • Clock Time Picker
  • Currency Field
  • Search with Filters
  • Signature Pad
  • Contact Form
  • Signup Form
  • Wizard Form
  • Survey Form
  • Address Form
  • Settings Form
  • Feedback Widget
  • Inline Subscribe
  • Booking Form
  • Waitlist Form
  • Compact Login
  • Profile Edit

Payments12

  • Pay Card Preview
  • Pay Card Form
  • Pay Method Picker
  • Pay Success Check
  • Pay Failed Retry
  • Pay Slide To Pay
  • Pay Order Summary
  • Pay Tip Selector
  • Pay Coupon Field
  • Pay Subscription Toggle
  • Pay Invoice Card
  • Pay Wallet Balance

HUD & carousels10

  • Carousel Ring 3D
  • HUD Frame
  • HUD Boot Screen
  • HUD Shelf Slider
  • HUD Filter Chips
  • HUD Status Bar
  • HUD Detail Panel
  • HUD Search Field
  • HUD Orbit Backdrop
  • HUD Toggle Switch

Maps & geo6

  • Map Route Replay
  • Map City Blocks
  • Map Pin Board
  • Map Store Locator
  • Map Heat Dots
  • Map Route Stats

Ordering kit13

  • Rating Review Card
  • Map Directions Card
  • QR Generator
  • Link in Bio Card
  • Orders Queue Board
  • Receipt 80mm
  • Install App Banner
  • Order Cart Bar
  • Order Cart Drawer
  • Chat Order Button
  • Chat Bubble Typing
  • Order Item Drawer
  • Open Now Badge

hyperblur · visual effects for React

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

TermsPrivacyRefundssupport@hyperblur.dev
Components/App UI

App UI

16 copy-paste items in this section.

Jump to
Open sprint boardG B
Open roadmapG R
Go to inboxG I

Command Palette

A Cmd+K modal with fuzzy search, grouped results, arrow-key navigation and a focus trap.

↗
  1. MC
    Maya Chen moved ORB-1422m ago
  2. SO
    Sam Okafor commented on ORB-13818m ago
    Can we ship the invite flow before Friday?

Activity Feed

A vertical timeline of events with avatars, detail cards and a staggered entrance.

↗
Notifications

Notification Bell

A bell button with a popping badge, a ring on new items and an unread dropdown.

↗
Sprint 24 is on track. 14 of 20 issues are closed.
12 open issues, 3 blocked on design review.
Maya, Sam, Priya and 2 others are on this sprint.

Tabs Underline

Tabs with a measured sliding underline, icons, counts and crossfading panels.

↗
Drag with the pointer, or hold Alt and press the arrow keys to move this card.
To do2
  • Auth
  • Search
Doing2
  • Billing
  • Invites

Kanban Board

Columns of cards you can drag between lists and reorder, with a placeholder slot and add buttons.

↗
N
Northwind Studio
Pro plan · 8 seats

Profile

This is how other people in the workspace see you.

Photo
PNG or JPG, at least 256 px.
MO
Personal details
Your name appears on comments and invoices.
You have unsaved changes

App Settings Page

An account settings screen with vertical tabs for profile, notifications, security and billing. A save bar slides up as soon as anything changes.

↗

Notifications

Today
LP
Lena Park mentioned you in Q4 pricing experiment
9:42 AM· Growth
DR
Diego Ramos assigned you Fix chart tooltip clipping on Safari
8:15 AM· Web app
RB
Release bot deployed web-app v2.14.0 to production
7:58 AM· Web app
Yesterday
AC
Amara Chen commented on Onboarding flow v3
6:20 PM· Design
TW
Tom Whitaker mentioned you in Weekly metrics review
2:04 PM· Growth
Earlier this week
SL
Sofia Lind invited you to Brand refresh workspace
Mon· Brand
KM
Kenji Mori commented on API rate limits doc
Mon· Platform
MentionGrowth·Today, 9:42 AM

Q4 pricing experiment

LP Lena Park mentioned you in this
@maya can you sanity check the annual discount copy before we ship the variant to 20% of traffic?
Lena Park opened the thread · 9:42 AM
2 people are following this
You will be notified about new replies

App Notifications Center

A full notifications inbox with All, Mentions and Unread filters, day groups, mark as read, a snooze menu with undo, an empty state and a detail pane.

↗

November 2026

MonTueWedThuFriSatSun
+2 more
Today4 events
Wednesday, Nov 4
Coming up
This month
Team9
Design2
Growth1
Personal3
Sales1

App Calendar Month

A month calendar with colored event chips, a highlighted today, an event popover, sliding month changes and an agenda panel for the selected day.

↗
Storage68.4 GB of 100.0 GB
VideoImagesDocsOther
Get 2 TB for $9.99/mo
10 items
Campaign assets48 items · Nov 3
Press kit12 items · Oct 29
hero-launch-v4.png4.8 MB · Nov 4
Launch brief.docx312 KB · Nov 2
Budget Q4.xlsx128 KB · Nov 1
teaser-cut-03.mp4286.0 MB · Oct 31
Brand guidelines.pdf18.2 MB · Oct 27
product-shots.zip642.0 MB · Oct 24
billboard-night.jpg9.1 MB · Oct 22
voiceover-final.wav54.0 MB · Oct 20
2 selected

App File Manager

A file browser with breadcrumbs, grid and list views, checkbox selection with a bulk action bar, a storage meter and a drag-over upload overlay.

↗

Northwind

Channels
Direct messages
#
launch-week
Shipping v2.15 on Nov 12
LPDRACTW
Yesterday
DR
Diego Ramos5:48 PM
Staging is green again. The Safari tooltip bug was a stacking context on the sidebar.
Fix is in PR 2381 if anyone wants to look before tomorrow.
MO
You6:02 PM
Reviewed and approved. Nice catch.
Today
AC
Amara Chen9:12 AM
Final hero is up. I went with the darker gradient, it reads better on the pricing page too.
pnghero-launch-v4.pngShared file
LP
Lena Park9:20 AM
Love it. Can we get a square crop for the social posts?
MO
You9:24 AM
I will pair with Amara after standup. Lena, do you still need the changelog draft today?
LPLena is typing
changelog-draft.md
Enter to send, Shift + Enter for a new line

App Chat Inbox

A team chat screen with channels and direct messages, grouped bubbles with day dividers, a composer with attachment chips and a live typing indicator.

↗

Edit profile · folio.page/maya

Up to date
Profile photoSquare image, 400 px or larger.
About
Links
Skills · 5/8
Product designDesign systemsData vizFigmaPrototyping
Open to work
Shows a badge on your public card.
Card color
Live preview
MO
Maya Okafor
Product designer, data-heavy interfaces
Lisbon, PortugalOpen to work

I design analytics tools people actually enjoy opening. Previously at Northwind and Ledgerline. Currently taking on two freelance projects for Q1.

Product designDesign systemsData vizFigmaPrototyping
PPortfoliomayaokafor.designDDribbbledribbble.com/mayaokLLinkedInlinkedin.com/in/mayaokafor

App Profile Editor

A portfolio profile editor with a live preview card beside the form, a photo upload, link rows you can add and remove, skill chips and a card color picker.

↗
3/6done
Getting started

Welcome to Northwind, Maya

3 steps left · about 7 minutes

  1. Pick a name and a URL your team will recognize. You can change both later in Settings.

  2. Projects move faster together. Invite by email or share a link that expires in 7 days.

    3
  3. Sync events from Postgres, Stripe or Segment. The first import usually finishes in under five minutes.

  4. Start from the Revenue template or a blank canvas. Drag metrics in, then pin the ones you check every morning.

  5. Get a message in Slack or email when a metric crosses a threshold, like churn above 3% in a week.

    3
  6. Check numbers on the go. Scan the code in Settings or search for Northwind in your app store.

Need a hand?

Most teams finish setup in one sitting.

Your team

3 people joined, 2 invites pending.

MOLPDR+

App Onboarding Checklist

A light getting-started screen with a progress ring, expandable checklist steps, a confetti burst when everything is done, plus Skip for now and dismiss.

↗

November 2026

Nov 9 – 15 · 16 events · 18.5 h booked

Mon 9
Tue 10
Wed 11
Thu 12
Fri 13
Sat 14
Sun 15
8 AM9 AM10 AM11 AM12 PM1 PM2 PM3 PM4 PM5 PM10:52
Standup
Design review: Billing v210:30 – 12:00Room 4B
1:1 with Priya1:30 – 2:30
Standup
Roadmap sync10:00 – 11:30Zoom
Interview: Staff engineer10:45 – 12:15Room 2A
Focus: pricing page copy3:00 – 4:30
Standup
Lunch with Marco12:00 – 1:00
Sprint planning2:00 – 4:00Room 4B
Standup
Customer call: Lumen Bank11:00 – 12:00
Release go/no-go3:30 – 5:00
Analytics office hours10:00 – 11:00
Team demo + drinks4:00 – 5:30Lounge
Climbing10:00 – 11:30Boulder Lab

App Calendar WeekNew

A week view on a time grid where events can be dragged to another day or hour and stretched from their bottom edge, snapping to 15 minutes with a live time tooltip. Overlapping events share the column, a red line marks the current time and a click on an empty slot creates an event.

↗
1import { forwardRef } from "react";
2import { cx } from "../lib/cx";
3
4export const Button = forwardRef(
5 function Button({ tone = "primary", ...props }, ref) {
6 return (
7 <button
8 ref={ref}
9 className={cx("btn", `btn-${tone}`)}
10 {...props}
11 />
12 );
13 },
14);

Button.tsx

Kind
Source file
Size
2.1 KB
Modified
Today, 10:42
Where
harbor-mobile/src/components

App File ExplorerNew

A column file browser where each folder opens in a new column to the right, with breadcrumbs, full arrow key navigation and a preview pane. The preview renders highlighted source, image art, a playable waveform, a spreadsheet grid or a document page depending on the file.

↗

Notifications 5

  • Deploys

    • Deploys2m

      harbor-web #812 is ready

      Preview built in 48s from fix/checkout-tax.

      +2 more from Deploys
    • Deploys14m

      harbor-api #455 is ready

      Migration 0042 applied on staging.

    • Deploys31m

      harbor-web #811 failed

      Type error in src/cart/summary.tsx.

  • Calendar

    • Calendar5h

      Quarterly planning

      Thu, Nov 12 · 10:00 to 11:30 · Room 4B

      +1 more from Calendar
    • Calendar6h

      Lumen Bank onboarding call

      Fri, Nov 13 · 15:00 to 15:45 · Zoom

App Notification GroupsNew

A notification center that folds each source into a stack with the newest card on top and the rest peeking underneath. A click fans the stack open with a spring, cards carry inline actions that resolve in place, and groups offer one bulk action.

↗

Appearance

Changes preview instantly for everyone in Lumen Ops.

Theme
Accent Violet
Density
Text size and sidebar
Up to date
Live preview
LLumen Ops
Overview
Incidents
Deploys
Members
Settings
OverviewNew deploy
Uptime, 30d99.982%+0.04
p95 latency184 ms−12 ms

App Appearance SettingsNew

An appearance panel for theme, accent, corner radius, density, text size and sidebar side, beside a miniature app that restyles itself live as each control moves. A status dot tracks unsaved changes and Reset returns to the last save.

↗
Previous sectionDashboardsNext sectionAgent kit