Converging Search Scroll

A pinned sequence: scattered labelled feature pills slide to the center and shrink into a single rounded dot while their text fades, the spotlight line lifts away, then the dot grows into a search bar that drops into place and a final header fades up beneath it.

Component

Where systems move with intention

Information flows best through intentional design

Find what matters through intelligent design

Discover a system that adapts to the way you think, not the other way around.

Flow

Knowledge Grid

Relay

Adaptive Layer

Signal

System Design

( System complete )

Install

npx shadcn@latest add @compronents/converging-search-scroll

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files

Checking access…

API

Prop	Type	Default	Description
features	string[]	7 feature labels	Pills placed at fixed start points that converge to center.
meshImage	string	BLANK-hosted PNG	Faint mesh behind the spotlight line.
embedded	boolean	true	Own the scroll container; set false to ride the window scroll.

Customize

featureslinks

The scattered feature pill labels.

spotlightText / headerText / searchLabeltext

The copy across the three phases.

Dependencies

gsaplenis