Mouthful Mode Wrapper wrapper

Let the pink demon devour everything on the screen for you. ( ͡• ͜ʖ ͡• )

In Kirby and the Forgotten Land, Kirby can not only eat enemies but also swallow all kinds of objects like cars, vending machines, and more.

The pink demon has evolved once again! ᕕ( ﾟ ∀。)ᕗ

I have to say this ability looks absolutely hilarious—I couldn't stop laughing while playing.

Usage Examples

Basic Usage

Toggle the isMouthful parameter to summon the pink demon Kirby to devour everything on the screen.

Summon Kirby

🐟

Codfish

A fish who loves programming, but has no fingers to type on a keyboard, and can't even buy a computer that works underwater.
( ´•̥̥̥ ω •̥̥̥` )

View example source code

<template>
  <div class="w-full flex flex-col items-center justify-center gap-10 p-6">
    <wrapper-kirby-mouthful-mode :is-mouthful="isMouthful">
      <div class="flex flex-col gap-4 border rounded">
        <base-checkbox
          v-model="isMouthful"
          class="p-4"
          :label="t('summonKirby')"
        />
      </div>
    </wrapper-kirby-mouthful-mode>

    <wrapper-kirby-mouthful-mode
      :is-mouthful="isMouthful"
      :body-rounded="9999"
      :mouth-rounded="9999"
    >
      <img
        src="/low/profile.webp"
        class="w-60 border-[0.5rem] border-white rounded-full object-cover shadow-xl"
      >
    </wrapper-kirby-mouthful-mode>

    <wrapper-kirby-mouthful-mode :is-mouthful="isMouthful">
      <div class="relative overflow-hidden border rounded bg-slate-300/50 p-6">
        <div class="icon">
          <div class="fish">
            🐟
          </div>
        </div>

        <div class="text-center text-xl font-bold">
          {{ t('codfish') }}
        </div>

        <div class="mt-2">
          {{ t('codfishDescription') }}<br>( ´•̥̥̥ ω •̥̥̥` )
        </div>
      </div>
    </wrapper-kirby-mouthful-mode>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

import BaseCheckbox from '../../base-checkbox.vue'
import WrapperKirbyMouthfulMode from '../wrapper-kirby-mouthful-mode.vue'

const { t } = useI18n()
const isMouthful = ref(false)
</script>

<style scoped lang="sass">
.icon
  position: absolute
  right: 0rem
  bottom: 0rem
  font-size: 14rem
  line-height: 10rem
  filter: brightness(0)
  transform: translate(14%, 60%) rotate(10deg)
  opacity: 0.04
  .fish
    animation: float 3s infinite ease-in-out

@keyframes float
  0%, 100%
    transform: translate(0%)
  50%
    transform: translate(-5%, 2%) rotate(5deg)
</style>

Kirby's Friends

Adjust the colors and let Kirby's friends join the feast! ლ（´∀`ლ）

Mouthful

Mouthful

Mouthful

Mouthful

View example source code

<template>
  <div class="w-full flex flex-col items-center justify-center gap-10 border border-gray-200 rounded-xl py-10">
    <div class="flex items-center border border-gray-200 rounded rounded-xl p-10">
      <input
        v-model="mainColor"
        type="color"
      >

      <input
        v-model="blushColor"
        type="color"
      >

      <wrapper-kirby-mouthful-mode
        is-mouthful
        :main-color="mainColor"
        :blush-color="blushColor"
        :body-rounded="9999"
        class="ml-10"
      >
        <div
          class="rounded px-8 py-11"
          v-text="t('mouthful')"
        />
      </wrapper-kirby-mouthful-mode>
    </div>

    <wrapper-kirby-mouthful-mode
      v-for="item, i in list"
      :key="i"
      is-mouthful
      v-bind="item"
      :body-rounded="9999"
      :mouth-rounded="9999"
      @mouseenter="onMouseenter(item)"
      @mouseleave="onMouseleave(item)"
    >
      <div
        class="rounded px-8 py-11 text-xl"
        v-text="t('mouthful')"
      />
    </wrapper-kirby-mouthful-mode>
  </div>
</template>

<script setup lang="ts">
import type { Writable } from 'type-fest'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import WrapperKirbyMouthfulMode from '../wrapper-kirby-mouthful-mode.vue'

type Param = Writable<InstanceType<typeof WrapperKirbyMouthfulMode>['$props']>

const { t } = useI18n()

const mainColor = ref('#FF9DC0')
const blushColor = ref('#FF639B')

const list = ref<Param[]>([
  {
    isMouthful: true,
    mainColor: '#ffea08',
    blushColor: '#fcb423',
  },
  {
    isMouthful: true,
    mainColor: '#5fd42c',
    blushColor: '#378c12',
  },
  {
    isMouthful: true,
    mainColor: '#f72a2a',
    blushColor: '#8f003e',
  },
])

function onMouseenter(param: Param) {
  param.isMouthful = false
}
function onMouseleave(param: Param) {
  param.isMouthful = true
}
</script>

How It Works

Uses SVG to draw Kirby's body, with animations controlled by anime.js.

📚 anime.js

This uses the SVG Mask technique to carve out Kirby's mouth, achieving the effect of Kirby devouring elements.

Source Code

Component

、Examples

API

Props

interface Props {
  /** 是否塞滿嘴 */
  isMouthful?: boolean;
  /** 卡比皮膚的厚度。單位 px
   *
   * @default 10
   */
  thickness?: number;
  /** 主色 */
  mainColor?: string;
  /** 腮紅顏色 */
  blushColor?: string;
  /** 身體圓角 */
  bodyRounded?: number;
  /** 嘴巴圓角 */
  mouthRounded?: number;
}