Internal Demo

画布 Widget 演示

展示已注册的 22 个动效 DSL。预处理 → iframe → hydrate。在预览区内向下滚动，可触发 FadeContent、ScrollReveal 等滚动动效。

BlurTextSplitTextGradientTextShinyTextCountUpTextTypeGlitchTextDecryptedTextScrollRevealFadeContentAnimatedContentCarouselScrollAnimatedListSpotlightCardTiltedCardGlareHoverMagnetElectricBorderStarBorderAuroraParticles

1. 原始 content（DSL）

<main class="bg-neutral-950 text-white">
  <!-- Hero -->
  <section class="relative min-h-[420px] overflow-hidden px-10 py-16">
    <Particles height="420" className="absolute inset-0 opacity-70" />
    <div class="relative z-10 flex flex-col items-center text-center gap-5">
      <p class="text-xs uppercase tracking-[0.3em] text-violet-400">Canvas Widget Showcase</p>
      <SplitText text="React Bits + GSAP" tag="h1" className="text-5xl font-bold max-w-3xl" delay="35" />
      <div data-we-component="BlurText" data-we-props='{"text":"画布动效全览 Demo","delay":100,"animateBy":"letters","className":"text-xl text-neutral-300"}'></div>
      <GradientText text="GradientText 渐变扫光" className="text-2xl font-semibold" />
      <ShinyText text="ShinyText 金属高光" className="text-lg text-neutral-400" />
    </div>
  </section>

  <!-- 文字动效 -->
  <section class="px-10 py-14 space-y-8 border-t border-white/10">
    <h2 class="text-sm font-semibold uppercase tracking-widest text-violet-400">A · 文字动效</h2>
    <div class="grid gap-8 md:grid-cols-2">
      <div class="rounded-2xl border border-white/10 bg-white/5 p-6 space-y-4">
        <p class="text-xs text-neutral-500">TextType</p>
        <TextType text="打字机效果 · VibeAny Designer" typingSpeed="40" className="text-2xl font-mono text-emerald-400" />
      </div>
      <div class="rounded-2xl border border-white/10 bg-white/5 p-6 space-y-4">
        <p class="text-xs text-neutral-500">GlitchText</p>
        <GlitchText text="GLITCH" speed="0.4" className="text-4xl font-black" />
      </div>
      <div class="rounded-2xl border border-white/10 bg-white/5 p-6 space-y-4">
        <p class="text-xs text-neutral-500">DecryptedText（悬停解密）</p>
        <DecryptedText text="ACCESS GRANTED" speed="35" className="text-2xl font-mono text-cyan-400" />
      </div>
      <div class="rounded-2xl border border-white/10 bg-white/5 p-6 space-y-4">
        <p class="text-xs text-neutral-500">CountUp</p>
        <CountUp from="0" to="2026" duration="2.5" className="text-6xl font-bold text-fuchsia-400" />
      </div>
    </div>
  </section>

  <!-- 背景 -->
  <section class="px-10 py-14 space-y-6 border-t border-white/10">
    <h2 class="text-sm font-semibold uppercase tracking-widest text-violet-400">B · 背景</h2>
    <div class="relative rounded-3xl overflow-hidden min-h-[240px]">
      <Aurora height="240" className="absolute inset-0" />
      <p class="relative z-10 p-8 text-center text-lg font-medium">Aurora 极光背景</p>
    </div>
  </section>

  <!-- 滚动入场 -->
  <section class="px-10 py-14 space-y-8 border-t border-white/10">
    <h2 class="text-sm font-semibold uppercase tracking-widest text-violet-400">C · 滚动入场</h2>
    <FadeContent duration="900" blur="true">
      <p class="text-2xl font-semibold text-center py-6">FadeContent 淡入模糊</p>
    </FadeContent>
    <AnimatedContent direction="vertical" distance="60" duration="0.7">
      <p class="text-xl text-center text-sky-300 py-6">AnimatedContent 方向上滑</p>
    </AnimatedContent>
    <ScrollReveal>
      <h3 class="text-3xl font-bold text-center py-8">ScrollReveal 滚动揭示标题</h3>
    </ScrollReveal>
  </section>

  <!-- 轮播 / 列表 -->
  <section class="px-10 py-14 space-y-8 border-t border-white/10">
    <h2 class="text-sm font-semibold uppercase tracking-widest text-violet-400">D · 轮播 & 列表</h2>
    <Carousel autoplay="true" loop="true" base-width="380" pause-on-hover="true">
      <item title="SplitText" description="GSAP 分裂" id="1" />
      <item title="ScrollReveal" description="滚动揭示" id="2" />
      <item title="Particles" description="WebGL 粒子" id="3" />
      <item title="Aurora" description="极光背景" id="4" />
    </Carousel>
    <p class="text-xs text-neutral-500 text-center">Scroll → Carousel（提取卡片标题）</p>
    <Scroll x-scroll="true" gap="20">
      <div class="flex gap-5">
        <div class="shrink-0 w-48 h-28 rounded-xl bg-violet-600 flex items-center justify-center font-semibold">横滑 A</div>
        <div class="shrink-0 w-48 h-28 rounded-xl bg-fuchsia-600 flex items-center justify-center font-semibold">横滑 B</div>
        <div class="shrink-0 w-48 h-28 rounded-xl bg-indigo-600 flex items-center justify-center font-semibold">横滑 C</div>
      </div>
    </Scroll>
    <AnimatedList items='["AnimatedList 条目一","条目二","条目三","条目四"]' className="max-w-md mx-auto" />
  </section>

  <!-- 卡片 / 3D -->
  <section class="px-10 py-14 space-y-8 border-t border-white/10">
    <h2 class="text-sm font-semibold uppercase tracking-widest text-violet-400">E · 卡片 & 3D</h2>
    <div class="flex flex-wrap justify-center gap-10">
      <TiltedCard
        imageSrc="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=500&h=400&fit=crop"
        captionText="TiltedCard 3D 倾斜"
        containerHeight="280px"
        containerWidth="320px"
      />
    </div>
    <SpotlightCard className="rounded-2xl p-8 bg-neutral-900 max-w-lg mx-auto">
      <h3 class="text-xl font-semibold">SpotlightCard</h3>
      <p class="text-neutral-400 mt-2 text-sm">移动鼠标查看聚光灯效果</p>
    </SpotlightCard>
  </section>

  <!-- 交互包装 -->
  <section class="px-10 py-14 space-y-8 border-t border-white/10 pb-20">
    <h2 class="text-sm font-semibold uppercase tracking-widest text-violet-400">F · 交互包装</h2>
    <div class="flex flex-wrap gap-8 justify-center items-start">
      <Magnet padding="100">
        <span class="inline-block px-8 py-4 rounded-2xl bg-violet-600 font-semibold shadow-lg">Magnet 磁吸</span>
      </Magnet>
      <GlareHover width="280px" height="120px" background="#18181b" borderRadius="16px">
        <div class="p-6 text-center text-sm">GlareHover 反光</div>
      </GlareHover>
    </div>
    <div class="max-w-md mx-auto space-y-6">
      <ElectricBorder color="#7cff67" speed="1.2" className="rounded-2xl">
        <div class="p-6 text-center bg-neutral-900 rounded-xl">ElectricBorder 电流边框</div>
      </ElectricBorder>
      <StarBorder color="#fbbf24" className="w-full">
        <div class="px-6 py-4 text-center bg-neutral-900 rounded-2xl font-medium">StarBorder 星芒边框</div>
      </StarBorder>
    </div>
  </section>
</main>

2. 预处理后 HTML

<main class="bg-neutral-950 text-white">
  <!-- Hero -->
  <section class="relative min-h-[420px] overflow-hidden px-10 py-16">
    <div data-we-component="Particles" data-we-props='{"height":420,"className":"absolute inset-0 opacity-70"}'></div>
    <div class="relative z-10 flex flex-col items-center text-center gap-5">
      <p class="text-xs uppercase tracking-[0.3em] text-violet-400">Canvas Widget Showcase</p>
      <div data-we-component="SplitText" data-we-props='{"text":"React Bits + GSAP","tag":"h1","className":"text-5xl font-bold max-w-3xl","delay":35}'></div>
      <div data-we-component="BlurText" data-we-props='{"text":"画布动效全览 Demo","delay":100,"animateBy":"letters","className":"text-xl text-neutral-300"}'></div>
      <div data-we-component="GradientText" data-we-props='{"text":"GradientText 渐变扫光","className":"text-2xl font-semibold"}'></div>
      <div data-we-component="ShinyText" data-we-props='{"text":"ShinyText 金属高光","className":"text-lg text-neutral-400"}'></div>
    </div>
  </section>

  <!-- 文字动效 -->
  <section class="px-10 py-14 space-y-8 border-t border-white/10">
    <h2 class="text-sm font-semibold uppercase tracking-widest text-violet-400">A · 文字动效</h2>
    <div class="grid gap-8 md:grid-cols-2">
      <div class="rounded-2xl border border-white/10 bg-white/5 p-6 space-y-4">
        <p class="text-xs text-neutral-500">TextType</p>
        <div data-we-component="TextType" data-we-props='{"text":"打字机效果 · VibeAny Designer","typingSpeed":40,"className":"text-2xl font-mono text-emerald-400"}'></div>
      </div>
      <div class="rounded-2xl border border-white/10 bg-white/5 p-6 space-y-4">
        <p class="text-xs text-neutral-500">GlitchText</p>
        <div data-we-component="GlitchText" data-we-props='{"text":"GLITCH","speed":0.4,"className":"text-4xl font-black"}'></div>
      </div>
      <div class="rounded-2xl border border-white/10 bg-white/5 p-6 space-y-4">
        <p class="text-xs text-neutral-500">DecryptedText（悬停解密）</p>
        <div data-we-component="DecryptedText" data-we-props='{"text":"ACCESS GRANTED","speed":35,"className":"text-2xl font-mono text-cyan-400"}'></div>
      </div>
      <div class="rounded-2xl border border-white/10 bg-white/5 p-6 space-y-4">
        <p class="text-xs text-neutral-500">CountUp</p>
        <div data-we-component="CountUp" data-we-props='{"from":0,"to":2026,"duration":2.5,"className":"text-6xl font-bold text-fuchsia-400"}'></div>
      </div>
    </div>
  </section>

  <!-- 背景 -->
  <section class="px-10 py-14 space-y-6 border-t border-white/10">
    <h2 class="text-sm font-semibold uppercase tracking-widest text-violet-400">B · 背景</h2>
    <div class="relative rounded-3xl overflow-hidden min-h-[240px]">
      <div data-we-component="Aurora" data-we-props='{"height":240,"className":"absolute inset-0"}'></div>
      <p class="relative z-10 p-8 text-center text-lg font-medium">Aurora 极光背景</p>
    </div>
  </section>

  <!-- 滚动入场 -->
  <section class="px-10 py-14 space-y-8 border-t border-white/10">
    <h2 class="text-sm font-semibold uppercase tracking-widest text-violet-400">C · 滚动入场</h2>
    <div data-we-component="FadeContent" data-we-props='{"duration":900,"blur":true}'>
      <p class="text-2xl font-semibold text-center py-6">FadeContent 淡入模糊</p>
    </div>
    <div data-we-component="AnimatedContent" data-we-props='{"direction":"vertical","distance":60,"duration":0.7}'>
      <p class="text-xl text-center text-sky-300 py-6">AnimatedContent 方向上滑</p>
    </div>
    <div data-we-component="ScrollReveal" data-we-props='{}'>
      <h3 class="text-3xl font-bold text-center py-8">ScrollReveal 滚动揭示标题</h3>
    </div>
  </section>

  <!-- 轮播 / 列表 -->
  <section class="px-10 py-14 space-y-8 border-t border-white/10">
    <h2 class="text-sm font-semibold uppercase tracking-widest text-violet-400">D · 轮播 & 列表</h2>
    <div data-we-component="Carousel" data-we-props='{"autoplay":true,"loop":true,"baseWidth":380,"pauseOnHover":true,"autoplayDelay":3000,"items":[{"title":"SplitText","description":"GSAP 分裂","id":1},{"title":"ScrollReveal","description":"滚动揭示","id":2},{"title":"Particles","description":"WebGL 粒子","id":3},{"title":"Aurora","description":"极光背景","id":4}]}'></div>
    <p class="text-xs text-neutral-500 text-center">Scroll → Carousel（提取卡片标题）</p>
    <div data-we-component="Carousel" data-we-props='{"autoplay":true,"loop":true,"baseWidth":340,"pauseOnHover":true,"autoplayDelay":3000,"items":[]}'></div>
    <div data-we-component="AnimatedList" data-we-props='{"items":["AnimatedList 条目一","条目二","条目三","条目四"],"className":"max-w-md mx-auto"}'></div>
  </section>

  <!-- 卡片 / 3D -->
  <section class="px-10 py-14 space-y-8 border-t border-white/10">
    <h2 class="text-sm font-semibold uppercase tracking-widest text-violet-400">E · 卡片 & 3D</h2>
    <div class="flex flex-wrap justify-center gap-10">
      <div data-we-component="TiltedCard" data-we-props='{"imageSrc":"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=500&h=400&fit=crop","captionText":"TiltedCard 3D 倾斜","containerHeight":"280px","containerWidth":"320px"}'></div>
    </div>
    <div data-we-component="SpotlightCard" data-we-props='{"className":"rounded-2xl p-8 bg-neutral-900 max-w-lg mx-auto"}'>
      <h3 class="text-xl font-semibold">SpotlightCard</h3>
      <p class="text-neutral-400 mt-2 text-sm">移动鼠标查看聚光灯效果</p>
    </div>
  </section>

  <!-- 交互包装 -->
  <section class="px-10 py-14 space-y-8 border-t border-white/10 pb-20">
    <h2 class="text-sm font-semibold uppercase tracking-widest text-violet-400">F · 交互包装</h2>
    <div class="flex flex-wrap gap-8 justify-center items-start">
      <div data-we-component="Magnet" data-we-props='{"padding":100}'>
        <span class="inline-block px-8 py-4 rounded-2xl bg-violet-600 font-semibold shadow-lg">Magnet 磁吸</span>
      </div>
      <div data-we-component="GlareHover" data-we-props='{"width":"280px","height":"120px","background":"#18181b","borderRadius":"16px"}'>
        <div class="p-6 text-center text-sm">GlareHover 反光</div>
      </div>
    </div>
    <div class="max-w-md mx-auto space-y-6">
      <div data-we-component="ElectricBorder" data-we-props='{"color":"#7cff67","speed":1.2,"className":"rounded-2xl"}'>
        <div class="p-6 text-center bg-neutral-900 rounded-xl">ElectricBorder 电流边框</div>
      </div>
      <div data-we-component="StarBorder" data-we-props='{"color":"#fbbf24","className":"w-full"}'>
        <div class="px-6 py-4 text-center bg-neutral-900 rounded-2xl font-medium">StarBorder 星芒边框</div>
      </div>
    </div>
  </section>
</main>

3. 画布 iframe（content）

在上方预览区内滚动；FadeContent / ScrollReveal 等需滚到视口内才触发。高度约 5200px。