vibecodng.com

Free MCP betaIndex and tools live

Measured entry

ruixen-product-feature-hero

herogradient-glowmotion on file

A client-side React hero pairing product copy and a CTA with an animated command-palette mockup, followed by a feature grid. It ships as a shadcn registry component and relies on Motion, Lucide icons, Tailwind theme utilities, and the usual cn helper alias.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of ruixen-product-feature-hero at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-product-feature-hero at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-product-feature-hero 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 ruixen-product-feature-hero
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal69.4 KB (134.8 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 35.76s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/cut/product-feature-hero.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A polished, responsive starting point for developer-product pages, with useful content props and restrained motion. It needs a shadcn-style setup to build and mount, and teams should fix the muted-text contrast before shipping. The added runtime weight is hard to justify for a purely decorative hero.

Use it if

  • You need a responsive launch-page hero for a developer tool or code-focused product.
  • You want editable headline, description, CTA, supporting copy, and feature data without rebuilding the layout.
  • Your app already uses shadcn-style Tailwind tokens and can absorb Motion for subtle entrance animation.

Skip it if

  • Your accessibility bar requires the supplied muted text colors to pass contrast checks without revision.
  • Your page has a strict JavaScript budget and the decorative animation does not justify the added runtime weight.
  • Your product cannot plausibly use the fixed code-editor command palette as its hero visual.

Install

Installation record for ruixen-product-feature-hero
Declared dependenciesmotion
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 Motion and Lucide React, configure the at-sign source alias, provide a cn class-merging helper, and define the Tailwind foreground, muted, card, and border theme utilities used by the component. Also ensure your Tailwind setup supports its mask utility, or replace that fade treatment with local CSS.

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/ruixenui/ruixen.com
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.