AnimatedCharFlip

Digit or character slot that flips vertically when its value changes.

Usage

svelte

<script lang="ts">
  import { AnimatedCharFlip } from "@milandekruijf/ui/svelte";

  let char = $state("4");
</script>

<AnimatedCharFlip {char} />

Examples

Random digit

<script lang="ts">
  import { css } from "@milandekruijf/pandacss/css";
  import { AnimatedCharFlip, Button } from "@milandekruijf/ui/svelte";
  import { row } from "./styles.js";

  let digit = $state(0);

  const readoutClass = css({
    display: "inline-flex",
    fontSize: "2xl",
    fontFamily: "sourceCodePro",
  });
</script>

<div class={row}>
  <span class={readoutClass}>
    <AnimatedCharFlip char={String(digit)} />
  </span>
  <Button size="sm" onclick={() => (digit = Math.floor(Math.random() * 10))}>
    Randomize
  </Button>
</div>

Props

Prop	Type	Default	Description
char	`string`	—	Current character; a vertical flip animates whenever it changes.
class?	`string`	—	Extra classes merged on the slot.