vibecodng.com

Free MCP betaIndex and tools live

Measured entry

cultui-distorted-glass

background-effectglassmorphismmotion on file

A client-side React strip that distorts the content behind it with an SVG fractal-noise filter, a translucent CSS layer, and Tailwind classes. It ships as a shadcn registry TSX file with a className prop and relies on the usual cn helper backed by clsx and tailwind-merge.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of cultui-distorted-glass at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of cultui-distorted-glass at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of cultui-distorted-glass at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for cultui-distorted-glass
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal29.7 KB (95.2 KB build, 65.5 KB baseline)
Bare modeOK
Provider requiredNO
Demo usedwritten from the component source API

Verdict

A focused decorative accent that builds and mounts cleanly, stays contained across the tested layouts, and introduces no detected accessibility violations. Use it when the distorted edge supports the composition, but test target browsers because its visual value depends on filter rendering and textured content behind it.

Use it if

  • You need a decorative frosted edge between dark page sections or along the bottom of a card.
  • Your React UI already uses Tailwind and can position the strip over content that provides visible texture.
  • You want a self-contained glass treatment with no provider or runtime configuration.

Skip it if

  • You need the effect to look identical across browsers with differing SVG filter and backdrop-filter behavior.
  • Your design system forbids inline component styles or requires every decorative effect in shared stylesheets.
  • You want a plain translucent panel rather than a narrow distorted edge, since this component is specialized for that role.

Install

Installation record for cultui-distorted-glass
Declared dependenciesclsx, tailwind-merge
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn React project, add Tailwind utility processing, clsx, tailwind-merge, and a compatible cn helper. Preserve client-side rendering and ensure the toolchain accepts the component's scoped JSX style block, or move that CSS into your stylesheet.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/nolly-studio/cult-ui
License
MIT
Record published
2026-08-16

Alternatives

Other published entries for the background-effect pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.