@wecode-team/gsap-canvas-render

v0.1.0

Published

12 days ago

We0 GSAP canvas render components for animated landing pages and iframe HTML rendering.

0High
0Medium
0Low

gsap react canvas animation landing-page we0

@wecode-team/gsap-canvas-render

We0 GSAP canvas render components for animated landing pages, ecommerce showcases, business websites, and iframe HTML rendering.

This package is an HTML motion enhancer, not a UI kit. Pass normal React or parsed HTML children such as section, article, div, img, h3, and p; the component adds GSAP behavior while the child HTML owns layout, color, typography, and visual style.

Install

npm install @wecode-team/gsap-canvas-render gsap @gsap/react

bun add @wecode-team/gsap-canvas-render gsap @gsap/react

Import

import {
  Gsap3DCardStage,
  GsapCinematicScroll,
  GsapCountUp,
  GsapFloatTilt,
  GsapLogoMarquee,
  GsapMagnetic,
  GsapParallax,
  GsapProductOrbit,
  GsapReveal,
  GsapStats,
} from "@wecode-team/gsap-canvas-render"

Exports

Gsap3DCardStage
GsapCinematicScroll
GsapCountUp
GsapFloatTilt
GsapLogoMarquee
GsapMagnetic
GsapParallax
GsapProductOrbit
GsapReveal
GsapStats
getGsapThemeStyle
parseCanvasData
GsapCanvasTheme
GsapThemeStyle

Recommended Model

Prefer behavior wrappers that keep the HTML visual design outside the component:

<GsapFloatTilt maxRotate="14" scale="1.04">
  <article class="rounded-[32px] bg-black p-8 text-white shadow-2xl">Normal HTML card</article>
</GsapFloatTilt>

Use scene components like Gsap3DCardStage only when the requested effect is specifically a 3D wall or a specialized showcase. GsapProductOrbit and GsapStats are kept for compatibility and special cases, but new AI prompts should prefer GsapFloatTilt, GsapReveal, GsapParallax, GsapMagnetic, GsapCountUp, GsapLogoMarquee, and GsapCinematicScroll.

Customization Model

Every component keeps its default look, but supports open customization:

className / class: class on the root component.
style: inline style on the root component.
Slot props: key internal regions expose xxxClassName, xxxClass, and xxxStyle.

HTML parsers can use the class and xxxClass aliases. React code can use className and xxxClassName.

<GsapReveal y={64} stagger={0.08}>
  <section className="rounded-[32px] bg-white p-10 text-slate-950 shadow-2xl">
    Normal HTML section
  </section>
</GsapReveal>

Shared text slots:

headerClassName / headerClass / headerStyle
eyebrowClassName / eyebrowClass / eyebrowStyle
titleClassName / titleClass / titleStyle
descriptionClassName / descriptionClass / descriptionStyle
hintClassName / hintClass / hintStyle

Shared themes:

"violet"
"ocean"
"sunset"
"lime"

GsapCinematicScroll

Turns a full page or long section into a scroll-driven cinematic story. The child HTML keeps its own layout and visual style; the component adds camera-like reveal, parallax depth, active-scene atmosphere, optional scene pinning, and focus changes while scrolling.

Best for landing pages, product launch pages, brand stories, case studies, gallery narratives, and premium ecommerce pages.

Use these attributes inside the child HTML:

data-gc-scene: marks a story scene. Each scene becomes one camera beat.
data-gc-reveal: element enters with cinematic depth and opacity.
data-gc-depth="0.4": parallax depth. Larger number means stronger movement.
data-gc-focus: element subtly scales and brightens when its section reaches focus.

Extra props:

disabled?: boolean | string
pinScenes?: boolean | string
markers?: boolean | string
scrub?: boolean | number | string
sceneHeight?: string | number
pinLength?: string | number
depth?: number | string
revealY?: number | string
revealScale?: number | string
cameraRotate?: number | string
start?: string
end?: string
contentClassName / contentClass / contentStyle
backdropClassName / backdropClass / backdropStyle

Default mode does not pin scenes, which is safer for iframe preview and screenshots. Use pinScenes="true" only when you want stronger cinematic stops.

export function CinematicLaunchPage() {
  return (
    <GsapCinematicScroll
      theme="ocean"
      sceneHeight="820px"
      scrub={0.8}
      depth={110}
      className="bg-[#04070a] text-white"
    >
      <section data-gc-scene className="flex px-12">
        <div data-gc-reveal className="max-w-3xl">
          <p className="text-xs uppercase tracking-[0.28em] text-cyan-200">Chapter 01</p>
          <h1 className="mt-5 text-7xl font-semibold text-white">A launch page with camera movement.</h1>
        </div>
        <div data-gc-depth="1.2" className="ml-auto h-72 w-72 rounded-full bg-cyan-300/20 blur-3xl" />
      </section>

      <section data-gc-scene className="flex items-center gap-10 px-12">
        <article data-gc-focus data-gc-reveal className="rounded-[36px] bg-white p-10 text-slate-950 shadow-2xl">
          <h2 className="text-4xl font-semibold">Product moment</h2>
          <p className="mt-4 text-slate-500">The card scales into focus as the scene reaches the camera.</p>
        </article>
        <div data-gc-depth="0.7" className="text-8xl font-black text-white/10">02</div>
      </section>
    </GsapCinematicScroll>
  )
}

HTML custom tag:

<GsapCinematicScroll theme="ocean" sceneHeight="820px" scrub="0.8" depth="110" class="bg-[#04070a] text-white">
  <section data-gc-scene class="flex px-12">
    <div data-gc-reveal class="max-w-3xl">
      <p class="text-xs uppercase tracking-[0.28em] text-cyan-200">Chapter 01</p>
      <h1 class="mt-5 text-7xl font-semibold text-white">镜头跟随滚动的产品叙事页</h1>
    </div>
    <div data-gc-depth="1.2" class="ml-auto h-72 w-72 rounded-full bg-cyan-300/20 blur-3xl"></div>
  </section>

  <section data-gc-scene class="flex items-center gap-10 px-12">
    <article data-gc-focus data-gc-reveal class="rounded-[36px] bg-white p-10 text-slate-950 shadow-2xl">
      <h2 class="text-4xl font-semibold">核心产品瞬间</h2>
      <p class="mt-4 text-slate-500">普通 HTML 区块会在滚动中进入镜头焦点。</p>
    </article>
    <div data-gc-depth="0.7" class="text-8xl font-black text-white/10">02</div>
  </section>
</GsapCinematicScroll>

GsapFloatTilt

Turns any single box into a 3D floating card that follows the pointer with rotation, scale, glare, and subtle idle motion. The child keeps its own HTML and visual style; the component only adds motion behavior.

Best for hero cards, product cards, testimonial cards, pricing cards, media previews, feature blocks, and any generated HTML box that should feel physical.

Extra props:

disabled?: boolean | string
glare?: boolean | string
float?: boolean | string
maxRotate?: number | string
perspective?: number | string
scale?: number | string
floatY?: number | string
floatRotate?: number | string
duration?: number | string
ease?: string
wrapperClassName / wrapperClass / wrapperStyle
contentClassName / contentClass / contentStyle
glareClassName / glareClass / glareStyle
shadowClassName / shadowClass / shadowStyle

Use it when the AI already has a good normal card and only needs to upgrade it into a premium 3D hover object. Put all visual decisions on the child card.

export function FloatingProductCard() {
  return (
    <GsapFloatTilt
      theme="lime"
      maxRotate={14}
      scale={1.04}
      className="w-[360px]"
      shadowClassName="opacity-60"
    >
      <article className="flex h-[430px] flex-col justify-between rounded-[34px] bg-[#0b1008] p-8 text-[#f7fee7] shadow-2xl">
        <span className="w-fit rounded-full bg-lime-300 px-3 py-1 text-xs font-bold uppercase tracking-[0.18em] text-[#18220d]">
          Limited
        </span>
        <img
          src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
          alt="Product"
          className="h-48 w-full rounded-[26px] object-cover"
        />
        <div>
          <h3 className="text-3xl font-semibold text-[#f7fee7]">Pulse Watch</h3>
          <p className="mt-3 text-sm text-lime-100">A normal product card becomes a floating 3D object.</p>
        </div>
      </article>
    </GsapFloatTilt>
  )
}

HTML custom tag:

<GsapFloatTilt
  theme="lime"
  maxRotate="14"
  scale="1.04"
  class="w-[360px]"
  shadowClass="opacity-60"
>
  <article class="flex h-[430px] flex-col justify-between rounded-[34px] bg-[#0b1008] p-8 text-[#f7fee7] shadow-2xl">
    <span class="w-fit rounded-full bg-lime-300 px-3 py-1 text-xs font-bold uppercase tracking-[0.18em] text-[#18220d]">Limited</span>
    <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" alt="产品图" class="h-48 w-full rounded-[26px] object-cover">
    <div>
      <h3 class="text-3xl font-semibold text-[#f7fee7]">Pulse Watch</h3>
      <p class="mt-3 text-sm text-lime-100">普通商品卡片会变成跟随鼠标转动的 3D 悬浮物体。</p>
    </div>
  </article>
</GsapFloatTilt>

GsapReveal

Reveals normal HTML when it enters the viewport. It is the default wrapper for making static sections feel polished without changing their visual design.

Common props: y, x, scale, rotate, stagger, duration, delay, once, scrub, selector.

<GsapReveal y="64" stagger="0.1" duration="0.85">
  <section class="rounded-[32px] bg-white p-10 text-slate-950 shadow-2xl">
    <p class="text-xs uppercase tracking-[0.24em] text-slate-500">Feature</p>
    <h2 class="mt-4 text-5xl font-semibold text-slate-950">普通区块滚动入场</h2>
    <p class="mt-4 text-slate-500">视觉仍然由内部 HTML 控制，组件只负责入场动效。</p>
  </section>
</GsapReveal>

GsapParallax

Adds scroll parallax to normal HTML. If children include data-gc-depth, each marked element uses its own depth; otherwise the whole child content moves.

Common props: amount, scrub, selector, start, end.

<GsapParallax amount="120" class="overflow-hidden rounded-[36px] bg-[#05070a] p-12 text-white">
  <div data-gc-depth="0.4" class="text-sm uppercase tracking-[0.24em] text-cyan-200">Layer 01</div>
  <h2 data-gc-depth="1" class="mt-6 text-6xl font-semibold text-white">滚动景深标题</h2>
  <div data-gc-depth="1.6" class="mt-10 h-64 rounded-[32px] bg-cyan-300/20 blur-2xl"></div>
</GsapParallax>

GsapMagnetic

Makes a normal button, card, badge, or CTA magnetically follow the pointer. The child HTML keeps all visual styles.

Common props: strength, rotate, scale, duration, ease.

<GsapMagnetic strength="28" rotate="3" scale="1.04">
  <button class="rounded-full bg-black px-8 py-4 text-sm font-semibold text-white shadow-xl">预约演示</button>
</GsapMagnetic>

GsapCountUp

Counts any number marked with data-gc-count inside normal HTML. Use this instead of a heavy stats component when the page already has a well-designed metric layout.

Count attributes: data-gc-count, data-gc-prefix, data-gc-suffix, data-gc-decimals.

<GsapCountUp duration="1.4" stagger="0.08">
  <section class="grid grid-cols-4 border border-[#24332a] bg-[#0b0f0c] text-[#f5f5f5]">
    <article class="border-r border-[#24332a] p-6">
      <span class="text-[10px] uppercase tracking-[0.22em] text-[#9a9a8a]">馆藏作品套数</span>
      <strong data-gc-count="12" data-gc-suffix="套" class="mt-8 block text-5xl font-semibold text-white">0套</strong>
    </article>
    <article class="border-r border-[#24332a] p-6">
      <span class="text-[10px] uppercase tracking-[0.22em] text-[#9a9a8a]">快门释放记录</span>
      <strong data-gc-count="180" data-gc-suffix="千次" class="mt-8 block text-5xl font-semibold text-white">0千次</strong>
    </article>
  </section>
</GsapCountUp>

Gsap3DCardStage

Turns normal cards into a centered draggable 3D showcase wall with depth, parallax, floating motion, and hover tilt.

Best for showcase walls, inspiration pages, brand cards, case study galleries, and product ecosystem sections.

Extra props:

tone?: "light" | "dark"
showCenter?: boolean | string
showHint?: boolean | string
centerClassName / centerClass / centerStyle
viewportClassName / viewportClass / viewportStyle
washClassName / washClass / washStyle
worldClassName / worldClass / worldStyle
wallClassName / wallClass / wallStyle
ambientClassName / ambientClass / ambientStyle
shellClassName / shellClass / shellStyle
floatClassName / floatClass / floatStyle
cardClassName / cardClass / cardStyle
cardContentClassName / cardContentClass / cardContentStyle
emptyClassName / emptyClass / emptyStyle

The default layout keeps the card wall around the visual center instead of scattering it mostly outside the canvas. showCenter controls the center title block. Use showCenter={false} in React or showCenter="false" in parsed HTML when the scene should only show cards. centerClassName/centerStyle are semantic aliases for the center copy block, and wallClassName/wallStyle are semantic aliases for the moving showcase wall. They can be used together with headerClassName and worldClassName.

export function ShowcaseWall() {
  return (
    <Gsap3DCardStage
      theme="violet"
      tone="light"
      showCenter={false}
      hint="Drag to explore"
      className="bg-[#f6f7fb]"
      wallStyle={{ transformOrigin: "50% 50%" }}
      centerStyle={{ color: "#111827" }}
      cardClassName="rounded-[28px] shadow-2xl"
      cardStyle={{ background: "#ffffff" }}
    >
      <article className="flex h-full flex-col justify-between bg-white p-6 text-slate-950">
        <strong className="text-lg text-slate-950">OpenAI</strong>
        <p className="mt-4 text-sm text-slate-500">AI platform capability card.</p>
      </article>

      <article className="flex h-full flex-col justify-between bg-slate-950 p-6 text-white">
        <strong className="text-lg text-white">Stripe</strong>
        <p className="mt-4 text-sm text-slate-300">Payment growth and transaction experience.</p>
      </article>
    </Gsap3DCardStage>
  )
}

HTML custom tag:

<Gsap3DCardStage
  theme="violet"
  tone="light"
  showCenter="false"
  hint="拖拽探索 3D 视界"
  class="bg-[#f6f7fb]"
  wallClass="scale-[0.96]"
  cardClass="rounded-[28px]"
>
  <article class="flex h-full flex-col justify-between bg-white p-6 text-slate-950">
    <strong class="text-lg text-slate-950">OpenAI</strong>
    <p class="mt-4 text-sm text-slate-500">AI 平台能力展示卡片。</p>
  </article>
</Gsap3DCardStage>

GsapLogoMarquee

Turns normal logos, brand names, tech labels, partner names, or short testimonials into a seamless horizontal marquee.

Extra props:

label?: string
items?: string[] | string
labelClassName / labelClass / labelStyle
trackClassName / trackClass / trackStyle
groupClassName / groupClass / groupStyle
itemClassName / itemClass / itemStyle
markClassName / markClass / markStyle

export function BrandMarquee() {
  return (
    <GsapLogoMarquee
      theme="ocean"
      label="Trusted by modern teams"
      className="bg-slate-950"
      labelClassName="text-cyan-100"
      itemClassName="rounded-2xl bg-white px-5 py-3 text-slate-950"
    >
      <div>GSAP</div>
      <div>React</div>
      <div>Next.js</div>
      <div>Canvas Engine</div>
    </GsapLogoMarquee>
  )
}

HTML custom tag:

<GsapLogoMarquee
  theme="ocean"
  label="Trusted by modern teams"
  class="bg-slate-950"
  labelClass="text-cyan-100"
  itemClass="rounded-2xl bg-white px-5 py-3 text-slate-950"
>
  <div>GSAP</div>
  <div>React</div>
  <div>Next.js</div>
</GsapLogoMarquee>

GsapProductOrbit

Turns normal product cards, case cards, or pricing cards into a 3D product orbit with center focus, side depth, auto rotation, and hover focus.

Advanced scene component. Prefer GsapFloatTilt, GsapReveal, or GsapParallax for normal product cards unless the requested design explicitly needs a 3D orbit carousel.

Extra props:

items?: ProductOrbitCardInput[] | string
cards?: ProductOrbitCardInput[] | string
cardHtml?: string[] | string
showFallback?: boolean | string
innerClassName / innerClass / innerStyle
copyClassName / copyClass / copyStyle
glowClassName / glowClass / glowStyle
stageClassName / stageClass / stageStyle
ringClassName / ringClass / ringStyle
itemClassName / itemClass / itemStyle
cardClassName / cardClass / cardStyle
cardContentClassName / cardContentClass / cardContentStyle

Card content priority:

children
cards
items
cardHtml
built-in fallback cards, unless showFallback={false} or showFallback="false"

Custom card visuals are intentionally open. The orbit wrapper only handles motion, 3D placement, hover focus, and pointer tilt. It no longer forces a panel background, border, or shadow on user-provided cards. Put the real visual style on the card HTML itself, or pass cardClassName / cardStyle when you need a shared shell style.

For HTML-only canvas usage, cards can be a JSON array of objects with html, content, or markup. cardHtml can also be a single string; separate multiple cards with .

export function ProductOrbit() {
  return (
    <GsapProductOrbit
      theme="lime"
      eyebrow="New Collection"
      title="Featured products"
      description="Normal product cards are upgraded into a 3D product orbit."
      className="bg-[#fff7ed] text-stone-950"
      titleClassName="text-6xl font-black text-stone-950"
      cardClassName="rounded-[32px] bg-white shadow-2xl"
    >
      <article className="flex h-full flex-col justify-between bg-white p-6 text-slate-950">
        <span className="w-fit rounded-full bg-lime-100 px-3 py-1 text-xs font-semibold text-lime-700">
          New
        </span>
        <img
          src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
          alt="Smart watch product"
          className="h-32 w-full rounded-3xl object-cover"
        />
        <div>
          <h3 className="text-2xl font-semibold text-slate-950">Pulse Watch</h3>
          <p className="mt-2 text-sm text-slate-500">Health signals, long battery life, light shell.</p>
          <strong className="mt-4 block text-xl text-slate-950">$299</strong>
        </div>
      </article>
    </GsapProductOrbit>
  )
}

React prop cards:

export function ProductOrbitFromProps() {
  return (
    <GsapProductOrbit
      theme="lime"
      title="Curated Editions"
      description="Cards are provided through props, while each card owns its visual style."
      cards={[
        {
          html: `<article class="flex h-full flex-col justify-between rounded-[32px] bg-[#0a0f07] p-7 text-[#f5ffe8] shadow-2xl"><span class="text-xs font-bold uppercase tracking-[0.22em] text-lime-300">Edition 01</span><h3 class="text-3xl font-semibold">Hand-bound Archive</h3><p class="text-sm text-lime-100">Museum-grade paper and numbered collection.</p></article>`,
        },
        {
          html: `<article class="flex h-full flex-col justify-between rounded-[32px] bg-white p-7 text-slate-950 shadow-2xl"><span class="text-xs font-bold uppercase tracking-[0.22em] text-slate-500">Edition 02</span><h3 class="text-3xl font-semibold">Silver Salt Prints</h3><p class="text-sm text-slate-500">Limited photography product card.</p></article>`,
        },
      ]}
    />
  )
}

HTML custom tag:

<GsapProductOrbit
  theme="lime"
  eyebrow="New Collection"
  title="明星商品展示"
  description="普通商品卡片会自动变成 3D 产品轨道。"
  class="bg-[#fff7ed] text-stone-950"
  titleClass="text-6xl font-black text-stone-950"
  cardClass="rounded-[32px] bg-white shadow-2xl"
>
  <article class="flex h-full flex-col justify-between bg-white p-6 text-slate-950">
    <span class="w-fit rounded-full bg-lime-100 px-3 py-1 text-xs font-semibold text-lime-700">New</span>
    <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" alt="智能腕表产品图" class="h-32 w-full rounded-3xl object-cover">
    <div>
      <h3 class="text-2xl font-semibold text-slate-950">Pulse Watch</h3>
      <p class="mt-2 text-sm text-slate-500">健康数据、长续航、轻量外壳。</p>
      <strong class="mt-4 block text-xl text-slate-950">$299</strong>
    </div>
  </article>
</GsapProductOrbit>

HTML custom tag with cards prop:

<GsapProductOrbit
  theme="lime"
  title="馆藏级商品轨道"
  description="卡片 HTML 通过参数传入，视觉完全由卡片自己控制。"
  showFallback="false"
  cards='[
    {"html":"<article class=\"flex h-full flex-col justify-between rounded-[32px] bg-[#0a0f07] p-7 text-[#f5ffe8] shadow-2xl\"><span class=\"text-xs font-bold uppercase tracking-[0.22em] text-lime-300\">Edition 01</span><h3 class=\"text-3xl font-semibold\">手工装订典藏</h3><p class=\"text-sm text-lime-100\">限量编号、博物馆级纸张和实体装帧。</p></article>"},
    {"html":"<article class=\"flex h-full flex-col justify-between rounded-[32px] bg-white p-7 text-slate-950 shadow-2xl\"><span class=\"text-xs font-bold uppercase tracking-[0.22em] text-slate-500\">Edition 02</span><h3 class=\"text-3xl font-semibold\">银盐实体摄影</h3><p class=\"text-sm text-slate-500\">摄影作品集的商品展示卡片。</p></article>"}
  ]'
/>

GsapStats

Turns normal metric cards into an animated data section with entrance motion and count-up values.

Advanced scene component kept for compatibility. Prefer GsapCountUp for new designs when the HTML already contains a metric layout.

Extra props:

stats?: StatItem[] | StatHtmlInput[] | string
items?: StatHtmlInput[] | string
statHtml?: string[] | string
showFallback?: boolean | string
innerClassName / innerClass / innerStyle
headerInnerClassName / headerInnerClass / headerInnerStyle
railClassName / railClass / railStyle
itemClassName / itemClass / itemStyle
indexClassName / indexClass / indexStyle
valueClassName / valueClass / valueStyle
labelClassName / labelClass / labelStyle
detailClassName / detailClass / detailStyle
sparkClassName / sparkClass / sparkStyle
fallbackClassName / fallbackClass / fallbackStyle
emptyClassName / emptyClass / emptyStyle

Card content priority:

children
items
statHtml
stats
built-in fallback metrics, unless showFallback={false} or showFallback="false"

Custom stat card visuals are open. The component only handles section entrance, item entrance, optional spark animation, and count-up values. When custom HTML is provided, the rail no longer forces the default panel border/background/shadow. Put the visual style directly on the card HTML, or use railClassName, itemClassName, and itemStyle for shared layout styling.

For HTML-only canvas usage, items or stats can be a JSON array with html, content, or markup. statHtml can also be a string; separate multiple stat cards with .

Count-up attributes:

data-gc-count: target number
data-gc-prefix: optional text before the number
data-gc-suffix: optional text after the number
data-gc-decimals: optional fixed decimal places

export function BusinessStats() {
  return (
    <GsapStats
      theme="sunset"
      eyebrow="Business Impact"
      title="Metrics become part of the story"
      description="Use data-gc-count on the number that should count up."
      className="bg-[#1c0d0a]"
      titleClassName="text-5xl font-black text-orange-50"
      valueClassName="text-6xl font-black text-orange-50"
    >
      <article className="flex flex-col justify-between text-orange-50">
        <span className="text-xs uppercase tracking-widest text-orange-200">Conversion</span>
        <strong data-gc-count="38" data-gc-suffix="%" className="text-5xl font-semibold text-orange-50">
          0%
        </strong>
        <p className="text-sm text-orange-100">Purchase conversion lift</p>
      </article>
    </GsapStats>
  )
}

React prop stat cards:

export function ArtisticStats() {
  return (
    <GsapStats
      theme="sunset"
      title="数据印证历程"
      description="统计卡片通过参数传入，视觉由卡片 HTML 自己控制。"
      showFallback={false}
      className="bg-[#050505] text-[#f5f5f5]"
      railClassName="grid-cols-4 border border-[#24332a] bg-[#0f1510]"
      items={[
        {
          html: `<article class="flex h-full flex-col justify-between border-r border-[#24332a] bg-[#0b0f0c] p-6 text-[#f5f5f5]"><span class="text-[10px] uppercase tracking-[0.22em] text-[#9a9a8a]">馆藏作品套数</span><strong data-gc-count="12" data-gc-suffix="套" class="text-5xl font-semibold text-white">0套</strong><p class="text-xs text-[#888888]">独立编号艺术微喷实物作品。</p></article>`,
        },
        {
          html: `<article class="flex h-full flex-col justify-between border-r border-[#24332a] bg-[#0b0f0c] p-6 text-[#f5f5f5]"><span class="text-[10px] uppercase tracking-[0.22em] text-[#9a9a8a]">快门释放记录</span><strong data-gc-count="180" data-gc-suffix="千次" class="text-5xl font-semibold text-white">0千次</strong><p class="text-xs text-[#888888]">沉淀为可收藏的视觉索引。</p></article>`,
        },
      ]}
    />
  )
}

HTML custom tag:

<GsapStats
  theme="sunset"
  eyebrow="Business Impact"
  title="关键增长数据"
  description="使用 data-gc-count 标记需要计数的数字。"
  titleClass="text-5xl font-black text-orange-50"
  valueClass="text-6xl font-black text-orange-50"
>
  <article class="flex flex-col justify-between text-orange-50">
    <span class="text-xs uppercase tracking-widest text-orange-200">Conversion</span>
    <strong data-gc-count="38" data-gc-suffix="%" class="text-5xl font-semibold text-orange-50">0%</strong>
    <p class="text-sm text-orange-100">购买转化提升</p>
  </article>
</GsapStats>

HTML custom tag with items prop:

<GsapStats
  theme="sunset"
  title="数据印证历程"
  description="统计卡片 HTML 通过参数传入，样式完全由卡片自己控制。"
  showFallback="false"
  class="bg-[#050505] text-[#f5f5f5]"
  railClass="grid-cols-4 border border-[#24332a] bg-[#0f1510]"
  items='[
    {"html":"<article class=\"flex h-full flex-col justify-between border-r border-[#24332a] bg-[#0b0f0c] p-6 text-[#f5f5f5]\"><span class=\"text-[10px] uppercase tracking-[0.22em] text-[#9a9a8a]\">馆藏作品套数</span><strong data-gc-count=\"12\" data-gc-suffix=\"套\" class=\"text-5xl font-semibold text-white\">0套</strong><p class=\"text-xs text-[#888888]\">独立编号艺术微喷实物作品。</p></article>"},
    {"html":"<article class=\"flex h-full flex-col justify-between border-r border-[#24332a] bg-[#0b0f0c] p-6 text-[#f5f5f5]\"><span class=\"text-[10px] uppercase tracking-[0.22em] text-[#9a9a8a]\">快门释放记录</span><strong data-gc-count=\"180\" data-gc-suffix=\"千次\" class=\"text-5xl font-semibold text-white\">0千次</strong><p class=\"text-xs text-[#888888]\">沉淀为可收藏的视觉索引。</p></article>"}
  ]'
/>

Canvas HTML Tag Mapping

When rendering parsed HTML in a canvas iframe, map lower-case custom tags to the exported React components:

import {
  Gsap3DCardStage,
  GsapCinematicScroll,
  GsapCountUp,
  GsapFloatTilt,
  GsapLogoMarquee,
  GsapMagnetic,
  GsapParallax,
  GsapProductOrbit,
  GsapReveal,
  GsapStats,
} from "@wecode-team/gsap-canvas-render"

export const CANVAS_IFRAME_COMPONENTS = {
  gsap3dcardstage: Gsap3DCardStage,
  gsapcinematicscroll: GsapCinematicScroll,
  gsapcountup: GsapCountUp,
  gsapfloattilt: GsapFloatTilt,
  gsaplogomarquee: GsapLogoMarquee,
  gsapmagnetic: GsapMagnetic,
  gsapparallax: GsapParallax,
  gsapproductorbit: GsapProductOrbit,
  gsapreveal: GsapReveal,
  gsapstats: GsapStats,
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@wecode-team/gsap-canvas-render

Install

Import

Exports

Recommended Model

Customization Model

GsapCinematicScroll

GsapFloatTilt

GsapReveal

GsapParallax

GsapMagnetic

GsapCountUp

Gsap3DCardStage

GsapLogoMarquee

GsapProductOrbit

GsapStats

Canvas HTML Tag Mapping