shadcn.io is not affiliated with official shadcn/ui
Concentric Rings Hero Block for Svelte
A compact, centred hero for a design tool on solid rails: concentric rings breathe behind a headline, a Shine Button and an outline button, over a ruled band of three stats.
Installation
Overview
A compact, centred hero with concentric rings behind the headline, for Svelte with Ark UI, shown here for Loomcraft, a design tool that resizes artwork for every channel. Faint rings breathe outward from the middle of the column, behind an announcement link, a headline, a sentence and two buttons: a Shine Button and an outline Button with a play icon. A ruled band of three centred stats closes it, with a solid rule above, hairlines between the stats and + marks on its corners. The hero opens on the page's top rule between the same side rails as the pricing blocks. It's built from Ripple, Guides, Announcement, Badge, Status, Shine Button and Button, with CSS transitions for the entrance and your theme's tokens for every colour, so it follows your theme, light or dark. For creative tools, design platforms, agency and portfolio homepages, and any launch that wants a striking first screen.
FAQ
How do I change the rings?
They're a Ripple that fills the column above the stats band. count sets how many rings spread from the centre past the corners (6 here), size the innermost one's diameter in pixels (200), intensity how strongly they show (subtle) and speed how fast they breathe (half the default). They take the text colour by default, your theme's foreground, dark rings on a light page and light rings on a dark one; pass color="var(--primary)" for rings in your accent. Every breath is a CSS animation, so no script runs, and with reduced motion the rings rest at full size.
Does it follow my theme?
Yes. Nothing sets a dark scope or paints a background: the rings, the pill, the buttons and the lines all take your theme's tokens, so the hero is light on a light page and dark on a dark one. The Shine Button is the one control in your primary colour; the rest is neutral.
How do I point the buttons at my pages?
Start designing and Watch the demo are links (href="#"): point them at your sign-up page and your demo video. To play the video in place instead, make Watch the demo a button that opens a Dialog.
asChild receives the button's props: spread them onto your router's link.
Is it accessible to screen reader and keyboard users?
The headline is the page's h1, and the rings are hidden from assistive tech. Every text keeps WCAG AA contrast over the rings, since they're faint and drawn in the text's own colour. The pill and both buttons are links with a visible focus ring, and the stats are a description list, each label read with its number. With reduced motion the rings stand still and nothing fades or rises on load.
How does it fit on a phone?
The headline steps down from text-6xl to text-4xl over two lines, the buttons wrap onto a second line when the row is too narrow, and the rings stay centred behind the text at any width. Both buttons end on the first screen, and the three stats keep one row with their hairlines down to a 320 px screen.
When should I use rings instead of a grid or a starfield?
Rings draw the eye to the middle, where the headline sits, and their slow breath feels calm: a good fit for creative and design products. A perspective grid reads more technical and retro, a starfield more atmospheric. Retro Grid and Starfield are backgrounds that wrap their content the way Ripple does, so either can replace it in the same place.