April 8, 2026SimpleHover & 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.
Preview
Source
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>
);
}