Primitive

Glass Surface

Reusable liquid glass surface with SVG displacement controls.

All components Registry setup

Preview

components/ui/glass-surface.tsx

Joesph,

You're Approved!

Start earning, interest starts the day funds clear.

Liquid filter controls

Frequency X0.008Frequency Y0.008Octaves2Noise blur0.020Displacement48Seed92

baseFrequency="0.008 0.008"

numOctaves="2"

stdDeviation="0.020"

seed="92"

displacement scale="48"

Install

pnpm dlx shadcn@latest add @rhythmic-ui/glass-surface

Glass Surface API

SVG turbulence and displacement filter controls for frequency, blur, displacement, seed, shape, radius, and clipping.

<GlassSurface>Content</GlassSurface>
<GlassSurface shape="pill">Pill</GlassSurface>
<GlassSurface displacementScale={48} frequencyX={0.008} frequencyY={0.008} />
<GlassSurface radius="28px" clipPath="polygon(0 0, 100% 10%, 92% 100%, 8% 88%)" />

Registry URL

Use through the configured namespace in consumer repos.

https://design.dev.rhythmic.io/r/glass-surface.json