April 8, 2026SimpleHover & 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.
Preview
Source
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's build<br />something great</h1>
<EmojiPillSpringReveal {...emojiPillSpringReveal} />
</div>
</div>
);
}
Dependencies
framer-motion