vibecodng.com

Free MCP betaIndex and tools live

Measured entry

cultui-hero-dithering

hero-effectdark-futuristicmotion on file

A client-side React hero that pairs a responsive split layout with an animated dithering shader. It ships as a compound component with editable heading, description, CTA, badges, and visual slots, and depends on the shader package plus shadcn-style Button, Badge, Tailwind theme classes, path aliases, and a cn utility.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of cultui-hero-dithering at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of cultui-hero-dithering at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of cultui-hero-dithering 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-hero-dithering
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious1
Axe moderate2
Axe minor0
Gzip marginal41.6 KB (107.0 KB build, 65.4 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 29.60s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/cut/components/ui/hero-dithering.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

It mounts cleanly in the configured harness and stays contained across the tested layouts, but it is not a portable drop-in: it needs a shadcn-style setup. Budget for contrast fixes, motion preferences, and the shader dependency before shipping.

Use it if

  • You want a dark split hero where editable copy, a CTA, badges, and an animated dither shader ship as one composition.
  • Your app already uses Tailwind and shadcn conventions, and you want separate shader controls for compact and wide layouts.
  • You need compound subcomponents and render hooks to replace the CTA or badge treatment without rebuilding the visual.

Skip it if

  • You need a lightweight static hero and do not want a shader runtime added to the client bundle.
  • Your design system does not provide shadcn-style Button, Badge, path aliases, theme tokens, or a cn helper.
  • You need an accessibility-clean drop-in; the verified rendering has text contrast issues that require design adjustment.
  • You cannot accommodate continuous motion or do not plan to add a reduced-motion alternative.

Install

Installation record for cultui-hero-dithering
Declared dependencies@paper-design/shaders-react, radix-ui
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

In a non-shadcn project, add the shader package and Radix UI, recreate compatible Button and Badge components, provide the cn class-merging helper and path aliases, and map the Tailwind theme tokens and custom font utilities used by the component.

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-14

Alternatives

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