Hero Section With Rotating Words

Pro

A 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

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

More hero sections