Apple play button

Elegant play button with Apple-inspired design and smooth hover animations. Features a dynamic toggle that expands from a circular button to a full-width player interface with smooth spring animations and glassmorphism effects.

Dependencies

Interaction Type

with shacn cli3.0

//components.json
  "registries": {
    "@skiper-ui": "https://skiper-ui.com//registry/{name}.json"
  }

npx shadcn add @skiper-ui/skiper3

OR with old shacncli

 npx shadcn@latest add https://skiper-ui.com/registry/skiper3.json

const DemoSkiper3 = () => {
  const [toggle, setToggle] = useState(false);

  return (
    <div className="flex h-full w-full items-center justify-center bg-[#121212]">
      <motion.div layout>
        <motion.div
          className="relative flex items-center justify-between overflow-hidden"
          style={{ borderRadius: 9999, width: 60 }}
          initial={{ scale: 0, y: "100%" }}
          animate={{ scale: 1, y: 0, width: !toggle ? 60 : 330 }}
          transition={{ type: "spring", bounce: 0.16 }}
        >
          {/* Your play button content */}
        </motion.div>
      </motion.div>
      <button onClick={() => setToggle((x) => !x)}>Toggle</button>
    </div>
  );
};

Source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

License & Usage:

• Free to use and modify in both personal and commercial projects.
• Attribution to Skiper UI is required when using the free version.
• No attribution required with Skiper UI Pro.