An independent label for ambient and drone
A small label for ambient, drone and slow electronic music. Every record is pressed at 180 grams and the whole catalogue stays in print.
A record label hero beside a square cover panel built on the ridgelines background component: dozens of stacked lines lifted by animated noise in a central band, each filled to hide the ridges behind it, rising from flat on load, with nearby lines lifting under the cursor. The panel inverts the theme's foreground and background. A headline, a short intro, an Arrow Pill with a play icon and an underline link sit alongside. Every plot setting passes through the plot prop; it pauses offscreen and holds a still frame for reduced motion.
A headline, an intro, a play-icon arrow pill and an underline link beside a square cover panel from the ridgelines component: dozens of stacked Canvas 2D lines lifted by animated noise in a central band, rising from flat on load and lifting under the cursor.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/hero225?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero225?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero225.tsx plus the ridgelines background and the button23 and button2 buttons it uses.
The installed file exports hero225Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero225, hero225Demo } from "@/components/beste/block/hero225";
export default function Page() {
return <Hero225 {...hero225Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero225 } from "@/components/beste/block/hero225";
export default function Page() {
return (
<Hero225
eyebrow="An independent label for ambient and drone"
heading="Signals from the quiet end of the dial."
description="Every record is pressed at 180 grams and the whole catalogue stays in print."
buttons={[
{ label: "Hear the new release", href: "/releases/latest" },
{ label: "Browse the catalogue", href: "/catalogue" },
]}
plot={{ inkColor: "var(--background)", paperColor: "var(--foreground)", lines: 56, riseIn: true }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small line above the heading |
heading | string | – | Headline, rendered as the page h1 |
description | string | – | Intro under the heading |
buttons | ActionButton[] | [] | The first renders as a dark Button23 pill with a Play icon, the rest as Button2 underline links |
plot | Omit<RidgelinesProps, "className" | "children"> | – | Forwards the Ridgelines component's props: inkColor, paperColor, lines, amplitude, spread, speed, weight, riseIn, interactive, peak, paused |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};aspect-square with a crosshair cursor; from lg the text takes 5 of 12 columns and the panel 7, and below lg the panel stacks under the text.inkColor: "var(--background)", paperColor: "var(--foreground)"), so the panel is an inverted cover in both themes.