vibecodng.com

Free MCP betaIndex and tools live

Measured entry

tripled-hero-section-shadcnui

herominimal-flatmotion on file

A centered product hero with staggered entrance animation, a feature badge, headline, calls to action, and proof stats. It ships as a client-side shadcn registry page using Tailwind utility classes, React, Framer Motion, a shared Button, Lucide icons, and Radix UI plus shadcn theme conventions.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of tripled-hero-section-shadcnui at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of tripled-hero-section-shadcnui at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of tripled-hero-section-shadcnui 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 tripled-hero-section-shadcnui
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal70.2 KB (135.6 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 58.65s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/components/ui/button.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A usable but generic animated hero for an existing shadcn app. It builds and mounts in the configured harness, but mobile overflow and text contrast need work. It needs a shadcn-style setup; the bare project fails because the shared button imports a missing utility module.

Use it if

  • You need a centered launch or product hero with restrained entrance animation and two calls to action.
  • Your app already uses shadcn components, Tailwind utilities, path aliases, and compatible theme variables.
  • You can replace the placeholder copy and proof stats with credible product-specific content.

Skip it if

  • Mobile horizontal overflow is unacceptable without revising the headline and proof-stat layout.
  • You need accessibility-ready defaults because the current muted and gradient text treatments fail contrast checks.
  • You want a lightweight static hero and do not otherwise need Framer Motion or Radix UI.
  • Your design system does not expose a shadcn-compatible Button, import alias, and utility layer.

Install

Installation record for tripled-hero-section-shadcnui
Declared dependenciesframer-motion, 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 Tailwind processing, the expected import alias, theme variables, Lucide icons, Framer Motion, React, and Radix UI. Also provide a compatible Button and the shared class-name utility module it imports.

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/moumen-soliman/uitripled
License
MIT
Record published
2026-08-14

Alternatives

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