shadcn.io is not affiliated with official shadcn/ui
Centered Bouncing Scroll Indicator Hero Block for Solid
A compact centered hero with four figures as separate cells with overshooting hairlines and a bouncing “Scroll to explore” link at its foot.
Installation
Overview
A compact, centered hero for Solid with Ark UI, here for Tessel, a database replicated to the edge. It has an announcement link, a headline, a sentence and a ShineButton with an outline Button as links, then four figures as separate cells whose hairlines overshoot their corners with + marks, and, at the foot, a quiet "Scroll to explore" link whose chevron bounces. The link goes to the id of the next section (NEXT_SECTION, #features), and the bounce stops for visitors who ask for reduced motion. The cells go two by two on phones. Made for landing pages that want an obvious way down.
FAQ
Where does “Scroll to explore” go?
To the element whose id is NEXT_SECTION, at the top of the file (#features). Change it to the id of the section after the hero. It is a real link, so it works without script, and the browser smooth-scrolls it if your page sets scroll-behavior: smooth.
Does the bounce respect reduced motion?
Yes. The chevron uses Tailwind's animate-bounce, with motion-reduce:animate-none, so it holds still for visitors who ask for it. The bounce is a loop, so it is only on the chevron and never on text.
How are the figure cells drawn?
Each is a relative list item with a Guides layer (extend="sm", + marks on its top start corner), apart from its neighbours by gap-6 so the overshoot of one never touches the next. Values are in bdi so signs and units stay in order in right-to-left text.
Is the primary button a link?
Yes: the ShineButton is the only primary control, a link on every framework: asChild with an a on Ark and Radix, render with nativeButton={false} on Base UI, and href on React Aria. The second action is an outline Button.