{"name":"ScrollReveal","title":"ScrollReveal","description":"Text gently unblurs and reveals on scroll.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <h2 ref=\"containerRef\" :class=\"`my-5 ${containerClassName}`\">\n    <p :class=\"`leading-relaxed font-semibold ${textClassName}`\" style=\"font-size: clamp(1.6rem, 4vw, 3rem)\">\n      <span v-for=\"(word, index) in splitText\" :key=\"index\" :class=\"word.isWhitespace ? '' : 'inline-block word'\">\n        {{ word.text }}\n      </span>\n    </p>\n  </h2>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\ninterface Props {\n  children: string;\n  scrollContainerRef?: { current: HTMLElement | null };\n  enableBlur?: boolean;\n  baseOpacity?: number;\n  baseRotation?: number;\n  blurStrength?: number;\n  containerClassName?: string;\n  textClassName?: string;\n  rotationEnd?: string;\n  wordAnimationEnd?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  enableBlur: true,\n  baseOpacity: 0.1,\n  baseRotation: 3,\n  blurStrength: 4,\n  containerClassName: '',\n  textClassName: '',\n  rotationEnd: 'bottom bottom',\n  wordAnimationEnd: 'bottom bottom'\n});\n\nconst containerRef = useTemplateRef<HTMLElement>('containerRef');\nlet scrollTriggerInstances: ScrollTrigger[] = [];\n\nconst splitText = computed(() => {\n  const text = typeof props.children === 'string' ? props.children : '';\n  return text.split(/(\\s+)/).map((word, index) => ({\n    text: word,\n    isWhitespace: word.match(/^\\s+$/) !== null,\n    key: index\n  }));\n});\n\nconst initializeAnimation = () => {\n  const el = containerRef.value;\n  if (!el) return;\n\n  scrollTriggerInstances.forEach(trigger => trigger.kill());\n  scrollTriggerInstances = [];\n\n  const scroller =\n    props.scrollContainerRef && props.scrollContainerRef.current ? props.scrollContainerRef.current : window;\n\n  const rotationTl = gsap.fromTo(\n    el,\n    { transformOrigin: '0% 50%', rotate: props.baseRotation },\n    {\n      ease: 'none',\n      rotate: 0,\n      scrollTrigger: {\n        trigger: el,\n        scroller,\n        start: 'top bottom',\n        end: props.rotationEnd,\n        scrub: true\n      }\n    }\n  );\n\n  if (rotationTl.scrollTrigger) {\n    scrollTriggerInstances.push(rotationTl.scrollTrigger);\n  }\n\n  const wordElements = el.querySelectorAll('.word');\n\n  const opacityTl = gsap.fromTo(\n    wordElements,\n    { opacity: props.baseOpacity, willChange: 'opacity' },\n    {\n      ease: 'none',\n      opacity: 1,\n      stagger: 0.05,\n      scrollTrigger: {\n        trigger: el,\n        scroller,\n        start: 'top bottom-=20%',\n        end: props.wordAnimationEnd,\n        scrub: true\n      }\n    }\n  );\n\n  if (opacityTl.scrollTrigger) {\n    scrollTriggerInstances.push(opacityTl.scrollTrigger);\n  }\n\n  if (props.enableBlur) {\n    const blurTl = gsap.fromTo(\n      wordElements,\n      { filter: `blur(${props.blurStrength}px)` },\n      {\n        ease: 'none',\n        filter: 'blur(0px)',\n        stagger: 0.05,\n        scrollTrigger: {\n          trigger: el,\n          scroller,\n          start: 'top bottom-=20%',\n          end: props.wordAnimationEnd,\n          scrub: true\n        }\n      }\n    );\n\n    if (blurTl.scrollTrigger) {\n      scrollTriggerInstances.push(blurTl.scrollTrigger);\n    }\n  }\n};\n\nonMounted(() => {\n  initializeAnimation();\n});\n\nonUnmounted(() => {\n  scrollTriggerInstances.forEach(trigger => trigger.kill());\n});\n\nwatch(\n  [\n    () => props.children,\n    () => props.scrollContainerRef,\n    () => props.enableBlur,\n    () => props.baseRotation,\n    () => props.baseOpacity,\n    () => props.rotationEnd,\n    () => props.wordAnimationEnd,\n    () => props.blurStrength\n  ],\n  () => {\n    initializeAnimation();\n  },\n  { deep: true }\n);\n</script>\n","path":"ScrollReveal/ScrollReveal.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["TextAnimations"]}