品牌海报三联卡片

三张人像海报统一搭配左上角标、中央品牌字标与底部介绍，图片轻缓缩放，标志和文字保持固定。

品牌排版六框架TypeScript

演示

悬停或聚焦卡片，图片轻缓放大。轻触、Enter 或空格固定选中，Escape 取消；复制后可替换三张图片、中央字标、角标及介绍。

npm install react react-dom gsap@3.12.7

将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。

上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。

npm install react react-dom gsap@3.12.7

BrandPosterCards.tsx

正在加载代码…

App.tsx

import { BrandPosterCards } from "./BrandPosterCards";

export default function App() {
  return <BrandPosterCards />;
}

共用原生核心处理交互，各框架独立挂载、更新和销毁实例。

下载独立 HTML参考 · 用户提供截图，作者未知

正在加载提示词…

属性	类型	默认值
`options.images` 三张图片地址，或含 src、alt、position 的对象；默认人像已内嵌。	`(string \| { src: string; alt?: string; position?: string })[]`
`options.description` 三张海报底部共用的品牌介绍。	`string`
`options.logoSrc` 中央完整品牌字标，默认使用网站现有的 LeiBox 矢量图。	`string`
`options.symbolSrc` 左上角独立小标志，默认使用 LeiBox 图形标。	`string`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`675`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`