Cascade Lines: React Texture component

Cascading lines texture: seven uneven bands of color fading inward from any edge of a positioned container, in warm red-to-amber and cool blue finishes. Used by the cascade Card examples.

pnpm dlx shadcn add @01orbital/cascade-lines

File

import type { ComponentProps } from "react"
import { cn } from "cn"

// Thickness, color and opacity of each band. Each list runs
// from the edge inward, strongest first.
const BANDS = {
  warm: [
    [4, "oklch(0.42 0.13 27)", 0.7],
    [3, "oklch(0.44 0.12 30)", 0.5],
    [5, "oklch(0.46 0.11 35)", 0.35],
    [2, "oklch(0.48 0.1 40)", 0.25],
    [4, "oklch(0.5 0.1 45)", 0.18],
    [3, "oklch(0.52 0.11 48)", 0.12],
    [5, "oklch(0.54 0.12 50)", 0.07],
  ],
  cool: [
    [4, "oklch(0.24 0.09 245)", 0.7],
    [3, "oklch(0.26 0.08 248)", 0.5],
    [5, "oklch(0.28 0.08 250)", 0.35],
    [2, "oklch(0.3 0.08 252)", 0.25],
    [4, "oklch(0.32 0.07 255)", 0.18],
    [3, "oklch(0.34 0.07 258)", 0.12],
    [5, "oklch(0.36 0.07 260)", 0.07],
  ],
} as const

const EDGES = {
  top: "inset-x-0 top-0 flex-col",
  bottom: "inset-x-0 bottom-0 flex-col",
  left: "inset-y-0 left-0 flex-row",
  right: "inset-y-0 right-0 flex-row",
} as const

/**
 * Seven uneven bands of color, strongest at an edge and fading inward over
 * 26px. Place inside a positioned parent; its background, padding and corner
 * clipping belong to that parent. The lines ignore the pointer and are hidden
 * from assistive tech. A span root also fits inside a button or link.
 */
function CascadeLines({
  variant = "warm",
  edge = variant === "warm" ? "top" : "bottom",
  className,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** Red-to-amber `warm`, or blue `cool`. Defaults to `warm`. */
  variant?: keyof typeof BANDS
  /** The edge the bands fall from. Defaults to top for warm, bottom for cool. */
  edge?: keyof typeof EDGES
}) {
  const vertical = edge === "left" || edge === "right"
  const near = edge === "top" || edge === "left"
  const bands = BANDS[variant]
  // Bands are listed edge-first, so the far edges lay them out in reverse.
  const ordered = near ? bands : bands.toReversed()

  return (
    <span
      aria-hidden="true"
      data-slot="cascade-lines"
      data-edge={edge}
      data-variant={variant}
      className={cn(
        "pointer-events-none absolute flex",
        EDGES[edge],
        className
      )}
      {...props}
    >
      {ordered.map(([thickness, background, opacity], index) => (
        <i
          key={index}
          className={vertical ? "block h-full shrink-0" : "block w-full"}
          style={{
            [vertical ? "width" : "height"]: thickness,
            background,
            opacity,
          }}
        />
      ))}
    </span>
  )
}

export { CascadeLines }

import { CascadeLines } from "@/components/texture/cascade-lines"

export default function CascadeLinesDemo() {
  return (
    <div className="grid w-full max-w-3xl gap-6 sm:grid-cols-2">
      <div className="relative overflow-hidden rounded bg-[oklch(0.13_0.03_30)] p-8 pt-14 text-white">
        <CascadeLines />
        <p className="font-medium">Warm / from the top</p>
        <p className="mt-2 text-sm/6 text-white/70">
          Seven bands of fading color.
        </p>
      </div>
      <div className="relative overflow-hidden rounded bg-[oklch(0.12_0.025_250)] p-8 pb-14 text-white">
        <CascadeLines variant="cool" />
        <p className="font-medium">Cool / from the bottom</p>
        <p className="mt-2 text-sm/6 text-white/70">
          A surface of your choosing.
        </p>
      </div>
    </div>
  )
}

Usage

import { CascadeLines } from "@/components/texture/cascade-lines"

export default function CascadeLinesDemo() {
  return (
    <div className="grid w-full max-w-3xl gap-6 sm:grid-cols-2">
      <div className="relative overflow-hidden rounded bg-[oklch(0.13_0.03_30)] p-8 pt-14 text-white">
        <CascadeLines />
        <p className="font-medium">Warm / from the top</p>
        <p className="mt-2 text-sm/6 text-white/70">
          Seven bands of fading color.
        </p>
      </div>
      <div className="relative overflow-hidden rounded bg-[oklch(0.12_0.025_250)] p-8 pb-14 text-white">
        <CascadeLines variant="cool" />
        <p className="font-medium">Cool / from the bottom</p>
        <p className="mt-2 text-sm/6 text-white/70">
          A surface of your choosing.
        </p>
      </div>
    </div>
  )
}

Announcement

Example of the Cascade Lines: an announcement panel with warm bands falling from the top and a hover line, for a release note or new-edition callout.

pnpm dlx shadcn add @01orbital/cascade-lines-announcement

npx shadcn add @01orbital/cascade-lines-announcement

yarn shadcn add @01orbital/cascade-lines-announcement

bunx --bun shadcn add @01orbital/cascade-lines-announcement

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { HoverEdge } from "@/components/glow/hover-edge"
import { CascadeLines } from "@/components/texture/cascade-lines"
import {
  Card,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "The next edition",
  title: "A new collection is taking shape.",
  link: { label: "Take a look", href: "#" },
} as const

/** An announcement panel with warm CascadeLines falling from the top and a HoverEdge line that lights when the panel is hovered. */
export default function CascadeLinesAnnouncement() {
  return (
    <Card className="dark relative w-full max-w-lg items-start gap-4 rounded-[10px] border border-border bg-background pt-14 text-foreground shadow-none ring-0 [--card-spacing:--spacing(8)]">
      <CascadeLines />
      <HoverEdge />
      <CardHeader className="gap-4">
        <Eyebrow variant="mono" tone="ink">
          {COPY.eyebrow}
        </Eyebrow>
        <CardTitle className="font-display text-[28px]/9 font-medium tracking-[-0.025em]">
          {COPY.title}
        </CardTitle>
      </CardHeader>
      <CardFooter>
        <a
          href={COPY.link.href}
          className="text-[13px]/6 underline underline-offset-[5px]"
        >
          {COPY.link.label}
        </a>
      </CardFooter>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cn } from "cn"

// Thickness, color and opacity of each band. Each list runs
// from the edge inward, strongest first.
const BANDS = {
  warm: [
    [4, "oklch(0.42 0.13 27)", 0.7],
    [3, "oklch(0.44 0.12 30)", 0.5],
    [5, "oklch(0.46 0.11 35)", 0.35],
    [2, "oklch(0.48 0.1 40)", 0.25],
    [4, "oklch(0.5 0.1 45)", 0.18],
    [3, "oklch(0.52 0.11 48)", 0.12],
    [5, "oklch(0.54 0.12 50)", 0.07],
  ],
  cool: [
    [4, "oklch(0.24 0.09 245)", 0.7],
    [3, "oklch(0.26 0.08 248)", 0.5],
    [5, "oklch(0.28 0.08 250)", 0.35],
    [2, "oklch(0.3 0.08 252)", 0.25],
    [4, "oklch(0.32 0.07 255)", 0.18],
    [3, "oklch(0.34 0.07 258)", 0.12],
    [5, "oklch(0.36 0.07 260)", 0.07],
  ],
} as const

const EDGES = {
  top: "inset-x-0 top-0 flex-col",
  bottom: "inset-x-0 bottom-0 flex-col",
  left: "inset-y-0 left-0 flex-row",
  right: "inset-y-0 right-0 flex-row",
} as const

/**
 * Seven uneven bands of color, strongest at an edge and fading inward over
 * 26px. Place inside a positioned parent; its background, padding and corner
 * clipping belong to that parent. The lines ignore the pointer and are hidden
 * from assistive tech. A span root also fits inside a button or link.
 */
function CascadeLines({
  variant = "warm",
  edge = variant === "warm" ? "top" : "bottom",
  className,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** Red-to-amber `warm`, or blue `cool`. Defaults to `warm`. */
  variant?: keyof typeof BANDS
  /** The edge the bands fall from. Defaults to top for warm, bottom for cool. */
  edge?: keyof typeof EDGES
}) {
  const vertical = edge === "left" || edge === "right"
  const near = edge === "top" || edge === "left"
  const bands = BANDS[variant]
  // Bands are listed edge-first, so the far edges lay them out in reverse.
  const ordered = near ? bands : bands.toReversed()

  return (
    <span
      aria-hidden="true"
      data-slot="cascade-lines"
      data-edge={edge}
      data-variant={variant}
      className={cn(
        "pointer-events-none absolute flex",
        EDGES[edge],
        className
      )}
      {...props}
    >
      {ordered.map(([thickness, background, opacity], index) => (
        <i
          key={index}
          className={vertical ? "block h-full shrink-0" : "block w-full"}
          style={{
            [vertical ? "width" : "height"]: thickness,
            background,
            opacity,
          }}
        />
      ))}
    </span>
  )
}

export { CascadeLines }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import type { ComponentProps } from "react"
import { cn } from "cn"

const EDGES = {
  top: "inset-x-0 top-0 h-0.5",
  bottom: "inset-x-0 bottom-0 h-0.5",
  left: "inset-y-0 left-0 w-0.5",
  right: "inset-y-0 right-0 w-0.5",
} as const

// React hoists one copy of this stylesheet for every instance.
const INTERACTION_CSS = `@media(hover:hover){:hover>.orbital-hover-edge{opacity:1}}:focus-visible>.orbital-hover-edge,:has(:is(a,button,summary,[role=button]):focus-visible)>.orbital-hover-edge,.orbital-hover-edge[data-active]{opacity:1}`

/**
 * A two-pixel rose–amber edge, fading out at both ends. Place as
 * a direct child of a positioned element: it appears when that parent is
 * hovered, has keyboard focus, or holds a link or button with keyboard focus.
 * Focus in a form field inside the parent leaves it off. No hover group or
 * event handlers are required. Reduced motion removes the opacity transition.
 * The line is decorative, ignores the pointer and uses a span root so it can
 * sit inside buttons and links as well as larger containers.
 */
function HoverEdge({
  edge = "bottom",
  active = false,
  className,
  style,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** The edge carrying the line. Defaults to `bottom`. */
  edge?: keyof typeof EDGES
  /** Keep the line visible, for example on a selected item. Defaults to false. */
  active?: boolean
}) {
  const direction =
    edge === "left" || edge === "right" ? "to bottom" : "to right"
  return (
    <>
      <style href="01orbital-hover-edge" precedence="default">
        {INTERACTION_CSS}
      </style>
      <span
        aria-hidden="true"
        data-slot="hover-edge"
        data-edge={edge}
        data-active={active || undefined}
        className={cn(
          "orbital-hover-edge pointer-events-none absolute opacity-0 transition-opacity duration-400 motion-reduce:transition-none",
          EDGES[edge],
          className
        )}
        style={{
          background: `linear-gradient(${direction}, transparent, oklch(0.65 0.1 350) 20%, oklch(0.62 0.13 60) 50%, oklch(0.45 0.12 40) 80%, transparent)`,
          ...style,
        }}
        {...props}
      />
    </>
  )
}

export { HoverEdge }

New

cascade-lines-sidebar

Sidebar

Example of the Cascade Lines: a sidebar with cool bands falling in from the left and a lit line beside the selected item, for a reading list or app navigation.

pnpm dlx shadcn add @01orbital/cascade-lines-sidebar

npx shadcn add @01orbital/cascade-lines-sidebar

yarn shadcn add @01orbital/cascade-lines-sidebar

bunx --bun shadcn add @01orbital/cascade-lines-sidebar

File

"use client"

import { useState } from "react"

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { HoverEdge } from "@/components/glow/hover-edge"
import { CascadeLines } from "@/components/texture/cascade-lines"
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

// The copy: change text here, not in the markup.
const CHAPTERS = ["Notes", "References", "Working files"] as const
const COPY = {
  eyebrow: "The reading room",
  status: "selected for this preview.",
} as const

/** A sidebar with cool CascadeLines falling in from the left edge and a HoverEdge line on the right of each item, lit for the selected one. */
export default function CascadeLinesSidebar() {
  const [chapter, setChapter] = useState<(typeof CHAPTERS)[number]>(CHAPTERS[0])
  return (
    <Card className="dark relative w-full max-w-sm gap-2 rounded-[10px] border border-border bg-background pr-7 pl-13 text-foreground shadow-none ring-0 [--card-spacing:--spacing(7)]">
      <CascadeLines variant="cool" edge="left" />
      <CardHeader className="px-0">
        <Eyebrow variant="mono" tone="ink" className="mb-3">
          {COPY.eyebrow}
        </Eyebrow>
      </CardHeader>
      <CardContent className="flex flex-col gap-2 px-0">
        <ToggleGroup
          orientation="vertical"
          className="w-full"
          spacing={2}
          aria-label={COPY.eyebrow}
          value={[chapter]}
          onValueChange={(next) => {
            const item = CHAPTERS.find((name) => name === next[0])
            if (item) setChapter(item)
          }}
        >
          {CHAPTERS.map((item) => (
            <ToggleGroupItem
              key={item}
              value={item}
              className="relative h-10 justify-start rounded-[3px] px-4 text-muted-foreground aria-pressed:bg-muted aria-pressed:text-foreground"
            >
              {item}
              <HoverEdge edge="right" active={chapter === item} />
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      </CardContent>
      <CardFooter className="px-0">
        <p role="status" className="mt-6 text-xs/snug text-muted-foreground">
          {chapter} {COPY.status}
        </p>
      </CardFooter>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cn } from "cn"

// Thickness, color and opacity of each band. Each list runs
// from the edge inward, strongest first.
const BANDS = {
  warm: [
    [4, "oklch(0.42 0.13 27)", 0.7],
    [3, "oklch(0.44 0.12 30)", 0.5],
    [5, "oklch(0.46 0.11 35)", 0.35],
    [2, "oklch(0.48 0.1 40)", 0.25],
    [4, "oklch(0.5 0.1 45)", 0.18],
    [3, "oklch(0.52 0.11 48)", 0.12],
    [5, "oklch(0.54 0.12 50)", 0.07],
  ],
  cool: [
    [4, "oklch(0.24 0.09 245)", 0.7],
    [3, "oklch(0.26 0.08 248)", 0.5],
    [5, "oklch(0.28 0.08 250)", 0.35],
    [2, "oklch(0.3 0.08 252)", 0.25],
    [4, "oklch(0.32 0.07 255)", 0.18],
    [3, "oklch(0.34 0.07 258)", 0.12],
    [5, "oklch(0.36 0.07 260)", 0.07],
  ],
} as const

const EDGES = {
  top: "inset-x-0 top-0 flex-col",
  bottom: "inset-x-0 bottom-0 flex-col",
  left: "inset-y-0 left-0 flex-row",
  right: "inset-y-0 right-0 flex-row",
} as const

/**
 * Seven uneven bands of color, strongest at an edge and fading inward over
 * 26px. Place inside a positioned parent; its background, padding and corner
 * clipping belong to that parent. The lines ignore the pointer and are hidden
 * from assistive tech. A span root also fits inside a button or link.
 */
function CascadeLines({
  variant = "warm",
  edge = variant === "warm" ? "top" : "bottom",
  className,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** Red-to-amber `warm`, or blue `cool`. Defaults to `warm`. */
  variant?: keyof typeof BANDS
  /** The edge the bands fall from. Defaults to top for warm, bottom for cool. */
  edge?: keyof typeof EDGES
}) {
  const vertical = edge === "left" || edge === "right"
  const near = edge === "top" || edge === "left"
  const bands = BANDS[variant]
  // Bands are listed edge-first, so the far edges lay them out in reverse.
  const ordered = near ? bands : bands.toReversed()

  return (
    <span
      aria-hidden="true"
      data-slot="cascade-lines"
      data-edge={edge}
      data-variant={variant}
      className={cn(
        "pointer-events-none absolute flex",
        EDGES[edge],
        className
      )}
      {...props}
    >
      {ordered.map(([thickness, background, opacity], index) => (
        <i
          key={index}
          className={vertical ? "block h-full shrink-0" : "block w-full"}
          style={{
            [vertical ? "width" : "height"]: thickness,
            background,
            opacity,
          }}
        />
      ))}
    </span>
  )
}

export { CascadeLines }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import type { ComponentProps } from "react"
import { cn } from "cn"

const EDGES = {
  top: "inset-x-0 top-0 h-0.5",
  bottom: "inset-x-0 bottom-0 h-0.5",
  left: "inset-y-0 left-0 w-0.5",
  right: "inset-y-0 right-0 w-0.5",
} as const

// React hoists one copy of this stylesheet for every instance.
const INTERACTION_CSS = `@media(hover:hover){:hover>.orbital-hover-edge{opacity:1}}:focus-visible>.orbital-hover-edge,:has(:is(a,button,summary,[role=button]):focus-visible)>.orbital-hover-edge,.orbital-hover-edge[data-active]{opacity:1}`

/**
 * A two-pixel rose–amber edge, fading out at both ends. Place as
 * a direct child of a positioned element: it appears when that parent is
 * hovered, has keyboard focus, or holds a link or button with keyboard focus.
 * Focus in a form field inside the parent leaves it off. No hover group or
 * event handlers are required. Reduced motion removes the opacity transition.
 * The line is decorative, ignores the pointer and uses a span root so it can
 * sit inside buttons and links as well as larger containers.
 */
function HoverEdge({
  edge = "bottom",
  active = false,
  className,
  style,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** The edge carrying the line. Defaults to `bottom`. */
  edge?: keyof typeof EDGES
  /** Keep the line visible, for example on a selected item. Defaults to false. */
  active?: boolean
}) {
  const direction =
    edge === "left" || edge === "right" ? "to bottom" : "to right"
  return (
    <>
      <style href="01orbital-hover-edge" precedence="default">
        {INTERACTION_CSS}
      </style>
      <span
        aria-hidden="true"
        data-slot="hover-edge"
        data-edge={edge}
        data-active={active || undefined}
        className={cn(
          "orbital-hover-edge pointer-events-none absolute opacity-0 transition-opacity duration-400 motion-reduce:transition-none",
          EDGES[edge],
          className
        )}
        style={{
          background: `linear-gradient(${direction}, transparent, oklch(0.65 0.1 350) 20%, oklch(0.62 0.13 60) 50%, oklch(0.45 0.12 40) 80%, transparent)`,
          ...style,
        }}
        {...props}
      />
    </>
  )
}

export { HoverEdge }

New

cascade-lines-section

Section

Example of the Cascade Lines: a wide section panel with cool bands rising from the bottom and a hover line along the top, for a feature callout or section opener.

pnpm dlx shadcn add @01orbital/cascade-lines-section

npx shadcn add @01orbital/cascade-lines-section

yarn shadcn add @01orbital/cascade-lines-section

bunx --bun shadcn add @01orbital/cascade-lines-section

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { HoverEdge } from "@/components/glow/hover-edge"
import { CascadeLines } from "@/components/texture/cascade-lines"
import {
  Card,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "An open studio",
  title: "A little room for a different direction.",
  link: { label: "Find the working pieces", href: "#" },
} as const

/** A wide section panel with cool CascadeLines rising from the bottom and a HoverEdge line along the top that lights on hover. */
export default function CascadeLinesSection() {
  return (
    <Card className="dark relative w-full max-w-2xl items-start justify-center gap-5 rounded-[10px] border border-border bg-background pt-10 pb-14 text-foreground shadow-none ring-0 [--card-spacing:--spacing(8)]">
      <CascadeLines variant="cool" />
      <HoverEdge edge="top" />
      <CardHeader className="gap-5">
        <Eyebrow variant="mono" tone="ink">
          {COPY.eyebrow}
        </Eyebrow>
        <CardTitle className="max-w-sm font-display text-[32px]/[38px] font-medium tracking-[-0.025em]">
          {COPY.title}
        </CardTitle>
      </CardHeader>
      <CardFooter>
        <a
          href={COPY.link.href}
          className="text-[13px]/6 underline underline-offset-[5px]"
        >
          {COPY.link.label}
        </a>
      </CardFooter>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cn } from "cn"

// Thickness, color and opacity of each band. Each list runs
// from the edge inward, strongest first.
const BANDS = {
  warm: [
    [4, "oklch(0.42 0.13 27)", 0.7],
    [3, "oklch(0.44 0.12 30)", 0.5],
    [5, "oklch(0.46 0.11 35)", 0.35],
    [2, "oklch(0.48 0.1 40)", 0.25],
    [4, "oklch(0.5 0.1 45)", 0.18],
    [3, "oklch(0.52 0.11 48)", 0.12],
    [5, "oklch(0.54 0.12 50)", 0.07],
  ],
  cool: [
    [4, "oklch(0.24 0.09 245)", 0.7],
    [3, "oklch(0.26 0.08 248)", 0.5],
    [5, "oklch(0.28 0.08 250)", 0.35],
    [2, "oklch(0.3 0.08 252)", 0.25],
    [4, "oklch(0.32 0.07 255)", 0.18],
    [3, "oklch(0.34 0.07 258)", 0.12],
    [5, "oklch(0.36 0.07 260)", 0.07],
  ],
} as const

const EDGES = {
  top: "inset-x-0 top-0 flex-col",
  bottom: "inset-x-0 bottom-0 flex-col",
  left: "inset-y-0 left-0 flex-row",
  right: "inset-y-0 right-0 flex-row",
} as const

/**
 * Seven uneven bands of color, strongest at an edge and fading inward over
 * 26px. Place inside a positioned parent; its background, padding and corner
 * clipping belong to that parent. The lines ignore the pointer and are hidden
 * from assistive tech. A span root also fits inside a button or link.
 */
function CascadeLines({
  variant = "warm",
  edge = variant === "warm" ? "top" : "bottom",
  className,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** Red-to-amber `warm`, or blue `cool`. Defaults to `warm`. */
  variant?: keyof typeof BANDS
  /** The edge the bands fall from. Defaults to top for warm, bottom for cool. */
  edge?: keyof typeof EDGES
}) {
  const vertical = edge === "left" || edge === "right"
  const near = edge === "top" || edge === "left"
  const bands = BANDS[variant]
  // Bands are listed edge-first, so the far edges lay them out in reverse.
  const ordered = near ? bands : bands.toReversed()

  return (
    <span
      aria-hidden="true"
      data-slot="cascade-lines"
      data-edge={edge}
      data-variant={variant}
      className={cn(
        "pointer-events-none absolute flex",
        EDGES[edge],
        className
      )}
      {...props}
    >
      {ordered.map(([thickness, background, opacity], index) => (
        <i
          key={index}
          className={vertical ? "block h-full shrink-0" : "block w-full"}
          style={{
            [vertical ? "width" : "height"]: thickness,
            background,
            opacity,
          }}
        />
      ))}
    </span>
  )
}

export { CascadeLines }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import type { ComponentProps } from "react"
import { cn } from "cn"

const EDGES = {
  top: "inset-x-0 top-0 h-0.5",
  bottom: "inset-x-0 bottom-0 h-0.5",
  left: "inset-y-0 left-0 w-0.5",
  right: "inset-y-0 right-0 w-0.5",
} as const

// React hoists one copy of this stylesheet for every instance.
const INTERACTION_CSS = `@media(hover:hover){:hover>.orbital-hover-edge{opacity:1}}:focus-visible>.orbital-hover-edge,:has(:is(a,button,summary,[role=button]):focus-visible)>.orbital-hover-edge,.orbital-hover-edge[data-active]{opacity:1}`

/**
 * A two-pixel rose–amber edge, fading out at both ends. Place as
 * a direct child of a positioned element: it appears when that parent is
 * hovered, has keyboard focus, or holds a link or button with keyboard focus.
 * Focus in a form field inside the parent leaves it off. No hover group or
 * event handlers are required. Reduced motion removes the opacity transition.
 * The line is decorative, ignores the pointer and uses a span root so it can
 * sit inside buttons and links as well as larger containers.
 */
function HoverEdge({
  edge = "bottom",
  active = false,
  className,
  style,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** The edge carrying the line. Defaults to `bottom`. */
  edge?: keyof typeof EDGES
  /** Keep the line visible, for example on a selected item. Defaults to false. */
  active?: boolean
}) {
  const direction =
    edge === "left" || edge === "right" ? "to bottom" : "to right"
  return (
    <>
      <style href="01orbital-hover-edge" precedence="default">
        {INTERACTION_CSS}
      </style>
      <span
        aria-hidden="true"
        data-slot="hover-edge"
        data-edge={edge}
        data-active={active || undefined}
        className={cn(
          "orbital-hover-edge pointer-events-none absolute opacity-0 transition-opacity duration-400 motion-reduce:transition-none",
          EDGES[edge],
          className
        )}
        style={{
          background: `linear-gradient(${direction}, transparent, oklch(0.65 0.1 350) 20%, oklch(0.62 0.13 60) 50%, oklch(0.45 0.12 40) 80%, transparent)`,
          ...style,
        }}
        {...props}
      />
    </>
  )
}

export { HoverEdge }

Seven uneven bands of color, strongest at an edge and fading inward over 26px. Place inside a positioned parent; its background, padding and corner clipping belong to that parent. The lines ignore the pointer and are hidden from assistive tech. A span root also fits inside a button or link.

Prop

Type

It also accepts the HTML attributes of the element it renders.

Cascade Lines

Usage

Examples

New

Announcement

New

Sidebar

New

Section

API reference

Dependencies

Bamboo Paper Sheet

Grain

Linen

Painted Canvas

Paper

Rice Paper

Cascade Lines

UsageCopy Anchor Link

ExamplesCopy Anchor Link

AnnouncementNew

SidebarNew

SectionNew

API referenceCopy Anchor Link

DependenciesCopy Anchor Link

More TextureCopy Anchor Link

Bamboo Paper Sheet

Grain

Linen

Painted Canvas

Paper

Rice Paper

Usage

Examples

New

New

New

API reference

Dependencies

More Texture