Drawn Path Features
A feature section threaded together by one fat orange stroke. The path sits behind the content on a negative layer and draws itself in exact step with the scroll, so the line arrives at each illustration and card just as that block reaches reading position, and completes on the last row. Stroke dash offset driven by GSAP ScrollTrigger with Lenis.
Designed to keep information clear and connected
A cleaner way to handle incoming updates
Instead of showing every message or notification instantly, the app groups related items and presents them in an organized panel. It keeps your workspace calm, even when activity spikes.
Built for increasing information demands
Whether it is files, notes, or incoming messages, the app sorts and prioritizes items automatically. It prevents clutter and helps maintain clarity during busy periods.
Clearer organization ready for whatever comes next
npx shadcn@latest add @compronents/drawn-path-featuresInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
| Prop | Type | Default | Description |
|---|---|---|---|
| images | [string, string, string, string] | Blob-hosted illustrations | The four illustrations the stroke threads past. |
| cards | [StrokePathCard, StrokePathCard] | Two BLANK feature cards | Heading and body for each of the two text cards. |
| strokeColor / strokeWidth | string / number | #FF5F0A / 200 | Color and thickness of the drawn path. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
strokeColor / strokeWidthcolorColor and thickness of the threading stroke.
cardstextThe two feature card headings and bodies.
gsaplenis