List View Icon

Three horizontal lines that shuffle vertically when active, animated with Motion spring transitions.

Installation

File Structure

list-view-icon.tsx

Usage

import { useState } from "react";
import { ListViewIcon } from "@/components/unlumen-ui/list-view-icon";

export default function Example() {
  const [isActive, setIsActive] = useState(false);

  return (
    <button onClick={() => setIsActive((prev) => !prev)}>
      <ListViewIcon isActive={isActive} />
    </button>
  );
}

API Reference

ListViewIcon

PropTypeDefaultDescription
isActiveboolean-When true, the three lines animate to their shuffled positions. When false they return to the resting state.
className?string-Extra classes applied to the root <span> element.

Notes

  • The icon is a <span> (not an SVG) composed of three <span> elements styled as horizontal lines.
  • Lines 0 and 1 travel downward by 5 px; line 2 travels upward by 10 px, producing a shuffle effect.
  • Each line has a staggered delay of 0.02 s × index for a ripple feel.
  • Set aria-label on the parent button to describe the action.

Credits

Built by leo.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.