Logo Origami

Animated flipping logo with origami effect.

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://inspira-ui.com/r/logo-origami.json"

Install Manually

Copy and paste the following code in the same folder

LogoOrigami.vue
LogoOrigamiItem.vue

API

Prop NameTypeDefaultDescription
classstring""Additional CSS classes for custom styling.
durationnumber1.5Duration of the flip animation in seconds.
delaynumber2.5Delay between flip animations in seconds.

Features

  • Origami Flip Animation: Animates flipping between multiple child components with an origami-style effect.
  • Customizable Timing: Adjust the duration and delay props to control the animation speed and interval.
  • Slot-Based Content: Accepts multiple child components or content via default slots.
  • Responsive Design: Designed to adapt to various screen sizes and devices.
  • Easy Integration: Simple to include in your Vue projects with minimal setup.

Credits

  • Inspired by origami animations and flip effects at hover.dev