April 8, 2026/Simple/Hover & Reveals

Divider Width Expand

Horizontal line expands from 0% to 100% width when a section is opened. Used as a visual separator animation for accordion-style toggles.

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

export default function DividerWidthExpandDemo() {
  return (
    <div className={styles.demo}>
      <div className={styles.inner}>
        <div className={styles.left}>
          <p className={styles.label}>What we do</p>
          <h2 className={styles.heading}>Services</h2>
        </div>
        <div className={styles.right}>
          <DividerWidthExpand {...dividerWidthExpand} />
        </div>
      </div>
    </div>
  );
}

Related Components

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