Scroll Animation

<script setup lang="ts">
import { ArrowUp } from "lucide-vue-next";
import { ScrollTo, SmoothScroll } from "@/components/orvui/motion/scroll-animation";
const sections = Array.from({ length: 16 }, (_, index) => index + 1);
</script>
<template>
  <SmoothScroll :root="false" class="h-64 w-full max-w-lg overflow-y-auto scrollbar-hide rounded-2xl border border-border bg-card">
    <div class="space-y-3 p-4"><div v-for="section in sections" :key="section" class="rounded-lg bg-muted/60 px-3 py-4 text-sm text-muted-foreground">Section {{ section }}</div></div>
    <ScrollTo :to="0" aria-label="Scroll to top" class="sticky bottom-3 left-[calc(100%-3rem)] z-10 grid size-9 place-items-center rounded-full border border-border bg-background/80 text-foreground backdrop-blur transition-colors hover:bg-background"><ArrowUp class="size-4" /></ScrollTo>
  </SmoothScroll>
</template>

<script setup lang="ts">
import { onBeforeUnmount } from "vue";
import { useMotionValue } from "motion-v";
import { ScrollProgress } from "@/components/orvui/motion/scroll-animation";
const fraction = useMotionValue(0);
function track(event: Event) {
  const viewport = event.currentTarget as HTMLElement;
  fraction.set(viewport.scrollTop / Math.max(1, viewport.scrollHeight - viewport.clientHeight));
}
onBeforeUnmount(() => fraction.destroy());
</script>
<template>
  <div class="relative w-full max-w-lg overflow-hidden rounded-2xl border border-border bg-card">
    <ScrollProgress :progress="fraction" :fixed="false" :height="3" />
    <div class="absolute right-3 top-3 z-10 rounded-full bg-background/70 p-1 backdrop-blur"><ScrollProgress variant="circle" :progress="fraction" :size="36" /></div>
    <div class="h-64 overflow-y-auto scrollbar-hide" @scroll="track"><div class="space-y-3 p-4">
      <div v-for="section in 18" :key="section" class="rounded-lg bg-muted/60 px-3 py-4 text-sm text-muted-foreground">Section {{ section }}</div>
    </div></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Parallax } from "@/components/orvui/motion/scroll-animation";
const viewport = ref<HTMLElement | null>(null);
const layers = [
  { speed: -0.6, wrapper: "absolute inset-x-0 -top-1/4 h-[150%]", src: "https://picsum.photos/id/528/800/600", image: "size-full object-cover" },
  { speed: 0.5, wrapper: "absolute inset-0 grid place-items-center" },
  { speed: 0.9, wrapper: "absolute bottom-4 right-4", src: "https://picsum.photos/id/621/120/120", image: "size-12 rounded-full border-2 border-background object-cover shadow-lg" },
];
</script>
<template>
  <div ref="viewport" class="relative h-[600px] w-full max-w-2xl overflow-y-auto scrollbar-hide rounded-2xl border border-border bg-card">
    <div class="flex h-80 items-center justify-center text-sm text-muted-foreground">Scroll down ↓</div>
    <div class="relative h-96 overflow-hidden">
      <Parallax v-for="(layer, index) in layers" :key="index" :container="viewport" :speed="layer.speed" :class="layer.wrapper">
        <img v-if="layer.src" :src="layer.src" alt="" :class="layer.image" />
        <span v-else class="rounded-full bg-background/85 px-5 py-2 text-base font-medium text-foreground backdrop-blur">Parallax</span>
      </Parallax>
    </div>
    <div class="flex h-80 items-center justify-center text-sm text-muted-foreground">↑ Scroll up</div>
  </div>
</template>

<script setup lang="ts">
import { useId } from "vue";
import { ScrollTo, SmoothScroll } from "@/components/orvui/motion/scroll-animation";
const instanceId = useId();
const sections = ["Intro", "Features", "Pricing", "FAQ"].map(label => ({ label, id: `${instanceId}-${label.toLowerCase()}` }));
</script>
<template>
  <SmoothScroll :root="false" class="relative h-80 w-full max-w-lg overflow-y-auto scrollbar-hide rounded-2xl border border-border bg-card">
    <nav class="sticky top-0 z-10 flex gap-1.5 border-b border-border bg-background/80 p-2 backdrop-blur">
      <ScrollTo v-for="section in sections" :key="section.id" :to="`#${section.id}`" :offset="-48" class="rounded-full px-3 py-1 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">{{ section.label }}</ScrollTo>
    </nav>
    <section v-for="section in sections" :id="section.id" :key="section.id" class="flex h-64 items-center justify-center text-lg font-medium text-foreground">{{ section.label }}</section>
  </SmoothScroll>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ScrollReveal } from "@/components/orvui/motion/scroll-animation";
const viewport = ref<HTMLElement | null>(null);
const samples = ["Spring slide", "Blur in", "Staggered by delay", "Reveal once"];
</script>
<template>
  <div ref="viewport" class="h-80 w-full max-w-lg overflow-y-auto scrollbar-hide rounded-2xl border border-border bg-card">
    <div class="flex flex-col gap-16 p-6"><div class="text-center text-sm text-muted-foreground">Scroll ↓</div>
      <ScrollReveal v-for="(label, index) in samples" :key="label" :root="viewport" :once="false" :delay="index * 0.05"
        class="rounded-xl border border-border bg-muted/50 px-4 py-16 text-center text-base font-medium text-foreground">{{ label }}</ScrollReveal>
      <div class="text-center text-sm text-muted-foreground">End</div>
    </div>
  </div>
</template>