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 https://ui.aryank.space/r/converging-search-scroll.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

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

Where systems move with intention

Information flows best through intentional design

Find what matters through intelligent design

( System complete )

components

ui