Skip to content

component

Word Shifter

By Sanna Granqvist

Details

Summary

Rotating words with adaptive highlight

Description

Create a sentence like “Build bold text components.” and let the middle word rotate through your own list. You control three parts: textBefore words textAfter The component handles the animation and keeps the layout steady while the word changes. Highlight styles Choose how the rotating word is presented: Pill – Rounded background behind the word Solid – Changes the word color None – Pure rotation, no extra styling The pill background can resize automatically to match each word, or stay fixed if you prefer a locked width. Animation controls Auto-rotates every 2.5 seconds Smooth slide-up entrance and exit Adjustable in and out durations Respects prefers-reduced-motion Layout controls Fine-tune vertical offset Adjust gap spacing Left, center, or right alignment Best used for Hero sections SaaS landing pages Feature intros Refund policy All sales are final. No refunds are offered after purchase.

Introduction

Rotating words with adaptive highlight

Rank history

Daily rank per list, from the first snapshot — lower is better.

11001200120088/148/228/309/79/15
  • All · #1763