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/Agent kit

Agent kit

18 copy-paste items in this section.

RARelay Assistant
The release is healthy and error rates are flat. Roll back with relay deploy --undo if that changes.

Streaming Text

Reveals an assistant reply word by word with a blinking cursor. Supports bold, inline code and line breaks. The server render shows the full text.

↗
AL

Ada Lovelace: Did the staging deploy go through?

RA

Relay Assistant: Yes. Build 482 is live on staging, all 3 checks passed.

Chat Thread

A scrolling conversation with user and assistant bubbles, avatars, timestamps, a streaming last reply, a typing indicator and auto-scroll to the newest message.

↗

Args
{ "query": "rollback policy" }
Result
{ "hits": 3, "top": "rollback.md" }

Tool Call Card

A collapsible card for a tool invocation with status, duration, syntax-colored arguments and result, and a copy button.

↗
RARelay Assistant
ThinkingThinking...0s
Reading logsReading logs

Thinking Indicator

A compact thinking state that cycles through phrases with a fade, as a shimmering label or breathing dots, with an optional elapsed timer.

↗

Prompt Bar

A chat composer with an auto-growing textarea, attach and mic buttons, a model picker and a send button. Enter sends, Shift+Enter adds a line.

↗
  1. Read deploy config (Done)

    relay.toml, 3 services

  2. Run staging checks (In progress)

    Health probes 2 of 3

  3. Promote to production (Pending)

Agent Steps

A vertical plan or trace with pending, active, done and failed steps joined by a connector line that fills as steps complete.

↗
Run 4821, refund request4.8s total
Span02.4s4.8s
  1. support_agent.run4.8s
  2. tool · starts +840ms · took 1.3s
    {
      "query": "refund window",
      "results": 6
    }
  3. http · starts +900ms · took 980ms
    {
      "status": 200
    }
  4. tool · starts +2.3s · took 640ms
    {
      "error": "amount_exceeds_limit"
    }
  5. write_replyrunning

Agent Trace Timeline

A vertical trace of an agent run. Each span shows a status icon, a nested name and a bar sized to its start and duration, and spans with a payload expand in place.

↗

Refund order #4821

payments.refund

Partial refund to the card on file.

Proposed changesauto-reject 24s
amount$0.00→$48.00
reasondamaged_on_arrival

Agent Approval Card

A human-in-the-loop card for a proposed agent action, with a before and after summary, an Approve step that asks for confirmation, inline editing and a countdown that rejects on its own.

↗

What I remember

3 facts
  • Prefers short answers with code first.

    chat, Mar 394%
  • Deploys to Vercel from the main branch.

    repo scan81%
  • Works in the Lisbon time zone.

    inferred52%

Agent Memory Panel

A list of facts the agent remembers, each with a source chip and a confidence meter. Facts can be edited in place or forgotten with an animated removal.

↗
  • Aster ProreasoningvisionSpeedCost
  • Aster FlashfasttoolsSpeedCost
  • Lumen CodecodetoolsSpeedCost
  • Vela MinicheapfastSpeedCost
  • Quill Longlong contextSpeedCost

Agent Model Picker

A model selector with capability tags and speed and cost meters. It follows the listbox pattern with arrow keys, Home, End, typeahead and Escape.

↗
src/session.ts+2-1
@@ -18,7 +18,8 @@ export async function loadSession(req)
1818 const token = readToken(req);
1919 const store = await openStore();
20-Removed: const user = store.get(token);
20+Added: const user = token ? store.get(token) : null;
21+Added: if (!user) return redirect("/login");
2122 const prefs = await loadPrefs(user.id);

Agent File Diff

A compact unified diff viewer with line numbers, hunk headers, added and removed lines, collapsible unchanged context and a button that copies the patch.

↗
  • /summarizeCondense the thread or a file
  • /searchLook something up in the workspace
  • brief.pdf232 KB
  • mockup.png1.4 MB
Type / for commands

Agent Composer with Attachments

A message composer with animated attachment chips, a slash-command menu that opens on "/" and a send button with idle, ready, sending and sent states.

↗
Atlas workspace / Board prep
  • pdfQ3-board-deck.pdf2.4 MB
  • csvchurn-cohorts.csv184 KB

Prompt Box Modes

A composer with file attachments, Search, Think and Create mode chips that retint the box, and a send button that morphs into a Stop pill while a response is running. Enter sends, Escape stops.

↗
Review notes are in. Want me to send a summary to the team?
0:00Transcribing
Enter to send, mic to dictate

Prompt Voice Recorder

A composer that turns into a live waveform with a timer while you dictate, then collapses into a transcribing state and types the transcript into the box. It can read a real microphone level or simulate speech.

↗
/summarize
for the team @release-notes.mdTab
/ commands @ context Tab complete
  • Add context
  • md@release-notes.mdDocumentEnter

Prompt Slash Commands

A composer where / opens commands and @ opens context sources, with an inline ghost completion that Tab accepts. Picks become removable tokens in front of the text, and Backspace at the start removes the last one.

↗

Run 2291 · Ship the pricing page

00:00 / 01:30
PPlannerorchestrator
RResearcherweb + docs
CCoderrepo write
RReviewertests + lint
Break down brief
Merge findings
Scan 6 pricing pages
Scaffold route
Build tier table
Fix rounding
Run 48 tests
Re-run + lint
00:0000:2300:4501:0801:30
Planner started break down brief

Agent Run LanesNew

A replay of a multi-agent run with one swim lane per agent, task bars that fill as a playhead sweeps the time axis and curved handoff links that draw in when work passes between agents. Drag the track or use the arrow keys to scrub, and a status line narrates the latest event.

↗

Coder wants to run fs.write_file

Fix proration for months that are not 30 days long.

medium risk
@@ -12,6 +12,7 @@ export function prorate(
const days = daysBetween(start, end);
− const ratio = days / 30;
+ const ratio = days / daysInMonth(start);
+ if (ratio <= 0) return 0;
2/2 changes · +5 −1

Agent Tool PermissionNew

A permission prompt for a file-writing tool call that previews the change as a diff per file, lets you include or drop each hunk and choose how long the permission lasts. Approve applies only the chosen hunks, and the card turns into a receipt with Undo.

↗

Memory

123 / 130 tokens in context

Forgotten when the chat ends

  • 15 tokUsed in last reply
  • 12 tokOver budget, not sent

Agent Memory ScopesNew

Agent memory split into You, Project and This chat, with a token budget bar that packs pinned facts first and marks the ones that no longer fit. Facts edit in place, pause with a switch, glow when they were used in the last reply and can be added to the open scope.

↗
Previous sectionApp UINext sectionSocial & feedback