Pixel Crew 轮播图
示例:projects/ai-meta-ads-team。内容存放在 slides.js 中
(window.DECK);布局和动画在 slide.js 中;样式在 kit/carousel.css 中。
步骤
node scripts/new.mjs carousel <名称>- 重写
slides.js:brand(品牌名称、标语、句柄、关键词)和series(显示在每个标题中)。steps:每名员工的简短标签(显示在封面和底部步骤指示器中)。- 幻灯片类型:
cover(封面)、employee(员工,×N)、loop(循环)、cta(号召行动)。保持最多 10 张幻灯片。 - 员工字段:
color(r1…r7)、name(姓名)、dept(部门)、line(一句话描述)、prop(道具:magnifier、pencil、wrench、rocket、sliders、chart、chat)、status(状态,不超过 24 个字符)、skills(4×[图标, 标题, 描述],描述不超过 34 个字符)、tools(4×["glyph:infinity" | "icon:<名称>", 标签, 颜色])、delivers(4 个短项)、flow(3×[标题, 描述])。 - 图标:查看
kit/sprites.js(P映射)中的名称和字形infinity、camera、note、alien。
node scripts/carousel.mjs projects/<名称> --png并查看生成的 PNG(并排两张最快)。通过缩短文本(而非缩小字体)来修复溢出。node scripts/carousel.mjs projects/<名称>生成 PNG + MP4 文件到renders/<名称>/。
发布:按顺序上传 PNG(或动态 MP4);在 Instagram 应用中添加音乐。