title: Logo Origami
description: Animated flipping logo with origami effect.
---

```vue
<template>
  <div
    class="flex h-72 flex-col items-center justify-center gap-12 bg-background px-4 py-24 md:flex-row"
  >
    <LogoOrigami>
      <LogoOrigamiItem class="bg-orange-300 text-neutral-900">
        <Icon
          name="mdi:github"
          size="96"
        />
      </LogoOrigamiItem>
      <LogoOrigamiItem class="bg-green-300 text-neutral-900">
        <Icon
          name="logos:notion-icon"
          size="96"
        />
      </LogoOrigamiItem>
      <LogoOrigamiItem class="bg-cyan-300 text-neutral-900">
        <Icon
          name="logos:whatsapp-icon"
          size="96"
        />
      </LogoOrigamiItem>
      <LogoOrigamiItem class="bg-purple-300 text-black">
        <Icon
          name="logos:messenger"
          size="96"
        />
      </LogoOrigamiItem>
      <LogoOrigamiItem class="bg-white text-neutral-900">
        <Icon
          name="logos:google-drive"
          size="96"
        />
      </LogoOrigamiItem>
    </LogoOrigami>
  </div>
</template>

```

## 通过 CLI 安装

```vue
<InstallationCli component-id="logo-origami" />
```

## 手动安装

在同一个文件中，复制并粘贴以下代码：

::code-group

:CodeViewerTab{label="LogoOrigami.vue" language="vue" componentName="LogoOrigami" type="ui" id="logo-origami"}
:CodeViewerTab{filename="LogoOrigamiItem.vue" language="vue" componentName="LogoOrigamiItem" type="ui" id="logo-origami"}
::

## API

| Prop 名称  | 类型     | 默认值 | 描述                                       |
| ---------- | -------- | ------ | ------------------------------------------ |
| `class`    | `string` | `""`   | Additional CSS classes for custom styling. |
| `duration` | `number` | `1.5`  | Duration of the flip animation in seconds. |
| `delay`    | `number` | `2.5`  | Delay between flip animations in seconds.  |

## 功能特性

- **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.

## 感谢

- Inspired by origami animations and flip effects at [hover.dev](www.hover.dev/components/other#logo-origami)