Skip to main content
Animated flipping logo with origami effect.

​
Usage

<script setup lang="ts">
import { LogoOrigami } from '@/components/visualization'
</script>

<template>
  <LogoOrigami :duration="1.5" :delay="2.5">
    <img src="/logo.svg" alt="Logo" />
  </LogoOrigami>
</template>

​
Props

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

​
Credits

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

Build docs developers (and LLMs) love

Get started for freeTalk to us