Text Animation

<script setup lang="ts">
import { ref } from "vue";
import { TextScramble } from "@/components/orvui/motion/text-animation";
const steps = ["Inspecting the repository", "Running the checks", "Preparing the update"];
const selected = ref(0);
function advance() { selected.value = (selected.value + 1) % steps.length; }
</script>
<template><div class="flex w-full flex-col items-center gap-8 text-center"><TextScramble :text="steps[selected]" class="font-mono text-xl font-medium text-foreground" /><button type="button" @click="advance" class="inline-flex h-9 items-center rounded-full border border-border bg-card px-4 text-xs font-medium text-foreground hover:border-border-strong">Next phrase</button></div></template>

<script setup lang="ts">
import { ChromaticTextReveal } from "@/components/orvui/motion/text-animation";
const adjectives = ["natural.", "intentional.", "alive."];
</script>
<template><div class="@container flex w-full justify-center"><ChromaticTextReveal prefix="Motion that feels" :words="adjectives" :start-on-view="false" class="shrink-0 font-medium tracking-[-.04em] text-foreground [font-size:clamp(1.25rem,7.8cqw,3rem)]" /></div></template>

<script setup lang="ts">
import { ref } from "vue";
import { TextReveal } from "@/components/orvui/motion/text-animation";
const replay = ref(0);
</script>
<template><div class="flex w-full flex-col items-center gap-8 text-center"><div :key="replay" class="flex flex-col gap-2"><TextReveal as="h2" :text="['Motion that feels', 'considered.']" class="text-balance text-4xl font-semibold leading-[0.95] tracking-[-0.04em] text-foreground sm:text-5xl" /><TextReveal text="Word by word, with a soft blur." :delay=".9" :stagger=".05" :blur="6" y-offset="20%" class="text-sm text-muted-foreground" /></div><button type="button" @click="replay += 1" class="inline-flex h-9 items-center rounded-full border border-border bg-card px-4 text-xs font-medium text-foreground hover:border-border-strong">Replay</button></div></template>

<script setup lang="ts">
import { TextShimmer } from "@/components/orvui/motion/text-animation";
const examples = [{ text: "Loading projects…", class: "text-3xl font-semibold", duration: 2 }, { text: "Faster shimmer", class: "text-sm", duration: 1.5 }];
</script>
<template><div class="flex flex-col gap-4"><TextShimmer v-for="example in examples" :key="example.text" :duration="example.duration" :class="example.class">{{ example.text }}</TextShimmer></div></template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import { TextCascade } from "@/components/orvui/motion/text-animation";
const actions = ["Install skills", "Open settings", "Ship updates"];
const selected = ref(0);
let interval: ReturnType<typeof setInterval> | undefined;
onMounted(() => { interval = setInterval(() => selected.value = (selected.value + 1) % actions.length, 2400); });
onBeforeUnmount(() => clearInterval(interval));
</script>
<template><div class="flex w-full justify-center"><p class="text-lg font-medium text-foreground"><TextCascade :text="actions[selected]" /></p></div></template>