Skip to content

Fluted ring

Dark shader background with a light ring behind glass flutes.

Usage

Usage
import { FlutedRingBackground } from '@/components/blocks/background-07'


<FlutedRingBackground className="h-screen" />


// Optional: layer your own content on top
<FlutedRingBackground className="min-h-[560px]">
  <div />
</FlutedRingBackground>


// The amber preset, with a smaller ring and wider flutes
<FlutedRingBackground
  className="min-h-[560px]"
  palette="eclipse"
  ringSize={0.2}
  fluteWidth={24}
/>


// Override single tones on top of a palette
<FlutedRingBackground className="min-h-[560px]" colors={{ base: '#03060F' }} />

Install

pnpm dlx shadcn@latest add @pastaui-pro/background-07

Source

Props

Fluted ring props
PropTypeDefaultDescription
palette'blue' | 'eclipse'= 'blue'Preset colour scheme. 'blue' is a sky-blue ring fading to navy; 'eclipse' is the original golden ring burning through orange into ember.
colorsPartial<{ base: string; haze: string; primary: string; glow: string; highlight: string }>= { base: '#0A0A0A', haze: '#0A2A7A', primary: '#2B7FFF', glow: '#8EC5FF', highlight: '#E6F0FF' }Hex colours that override single tones of the palette: the near-black base, the deep outer edge of the glow, the saturated tone it passes through, the brightest middle of the ring and the pale tint caught by the flute edges.
intensitynumber= 1Brightness of the ring and edge lines. 1 matches the default look.
speednumber= 1How fast the ring breathes and its light turns. 0 freezes it.
ringSizenumber= 0.24Radius of the ring as a fraction of the shorter side of the frame, from 0.05 to 0.45.
fluteWidthnumber= 20Width of each glass flute in CSS pixels. Narrow screens cap it so about 28 flutes always fit.
childrenReactNode= —Content rendered on top of the background.
classNamestring= —Additional classes for the wrapper, such as a min height or layout.
styleCSSProperties= —Inline styles for the wrapper.