Oscilloscope

A Lissajous figure turning on an analogue oscilloscope.

oscilloscope-demo.tsx

import { Oscilloscope } from "@/components/oscilloscope";

export function Hero() {
  return (
    <Oscilloscope
      className="flex h-[560px] items-end p-10"
      palette="amber"
      ratio="3:4"
    >
      <h1 className="text-5xl font-semibold tracking-tight text-white">
        Your headline
      </h1>
    </Oscilloscope>
  );
}

Installation

pnpm dlx shadcn@latest add @gradients-pro/oscilloscope

Needs a Pro account and the Pro registry setup.

Usage

import { Oscilloscope } from "@/components/oscilloscope";

<Oscilloscope className="h-[560px]">{children}</Oscilloscope>;

It fills its box, so give it a height. Children render on top.

Props

Prop	Type	Default	Description
`palette`	`"p31-green"`, `"amber"`, `"ultramarine"`	`"p31-green"`	One of the curated palettes.
`appearance`	`"auto"`, `"dark"`, `"light"`	`"auto"`	Which version of the palette to use. `auto` follows a `dark` or `light` class (or `data-theme`) on `<html>`, then the OS setting.
`colors`	`string[]`	palette	2 to 6 CSS colours, `var(--x)` included. Replaces the palette's colours.
`background`	`string`	palette	Replaces the palette's background.
`size`	`number`	`1`	0.25 to 4. Size of the figure.
`ratio`	`string`	`"2:3"`	"1:2", "2:3", "3:4" or "3:5". Frequency ratio between the axes, which sets the figure's shape.
`glow`	`number`	`0.45`	0 to 1. Size of the beam's glow.
`grain`	`number`	`0.12`	0 to 1. Film grain.
`speed`	`number`	`0.6`	0 to 2. How fast it moves; 0 holds a still frame.
`params`	`Partial<GradientParams>`	none	Any other engine param, applied last.
`className`	`string`	none	Classes for the outer box. Give it a size, for example `h-[560px]`.
`style`	`CSSProperties`	none	Inline styles for the outer box.
`children`	`ReactNode`	none	Content drawn above the background.