April 8, 2026/Simple/Hover & Reveals

Emoji Pill Spring Reveal

A hidden pill element sits behind a button rotated 180deg and scaled to zero. On hover it spins to 0deg, scales to full size, and springs into view using a Framer Motion spring transition.

import EmojiPillSpringReveal from "./index.jsx";
import { emojiPillSpringReveal } from "../demo-data.js";
import styles from "./demo.module.css";

export default function EmojiPillSpringRevealDemo() {
  return (
    <div className={styles.demo}>
      <div className={styles.hero}>
        <p className={styles.label}>Available for work</p>
        <h1 className={styles.heading}>Let&apos;s build<br />something great</h1>
        <EmojiPillSpringReveal {...emojiPillSpringReveal} />
      </div>
    </div>
  );
}
  • framer-motion

Related Components

3MO AGO
Pixelate Imagehover-reveals
3MO AGO
Reveal Grouphover-reveals
3MO AGO
Clip-Path Inset Revealhover-reveals