Hero Section With Rotating Words
ProA premium bone-surface hero for a writing platform, with a concentric-ring orb radiating cyan-to-lime arcs from the bottom. Animated rotating-word headline, centered dropdown navbar, and dual CTA buttons overlaid on the glow.
When to use Hero Section With Rotating Words
The warm one. A bone coloured surface with cyan and lime arcs rising from the lower edge, and navigation built into the hero itself instead of bolted on above it. That last detail saves you a decision: there is no separate navbar to match, and no seam where two blocks meet. It also means you cannot swap the navigation later without editing this file.
The headline rotates through a set of words, which lets one hero address several audiences at once. That is genuinely useful for a product that resists a single noun, and actively harmful for one that does not, because a moving word is the first thing the eye locks onto and it had better be worth reading. The surface is fixed light with no dark variant, so this belongs on a brand that is closer to a magazine than to an enterprise dashboard.
Block details
- Category
- Hero Sections
- Renders
- CSS only. Paints as soon as the stylesheet arrives
- Theme
- Fixed light surface. No dark variant
- Responsive
- Mobile, tablet and desktop breakpoints are already set
- Dependencies
clsxtailwind-merge- Source
- 623 lines, 23 KB in one file
- Install
wensity add hero-section-with-rotating-words --type block- Stack
- React, Next.js, TypeScript and Tailwind CSS v4
- Licence
- Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
- Tags
- light, bone, orb, rings, glow, gradient, rotating-words, navbar, blog, productivity
- Last updated

