用 Open Slide 打造像素方块风演示：Minecraft 主题全解（调色板、等距方块、GUI 组件与动效规范）

【免费下载链接】open-slideA slide framework built for agents.项目地址https://gitcode.com/gh_mirrors/op/open-slide点击查看免费下载本篇技术指南围绕 Open Slide 官方演示库中的 Minecraft 主题文档apps/demo/themes/minecraft.md展开完整讲解如何复刻《我的世界》游戏内 UI 的视觉语言——包括 13 色「草块—泥土—深石」调色板、Press Start 2P 像素字体体系、硬像素斜角bevel代替柔阴影、等距 3D 方块IsoBlock、像素火把、物品栏凹槽等全套 paste-ready 组件以及steps()阶梯动效规范。读完本文你将能基于该主题文档与配套演示源文件apps/demo/themes/minecraft.demo.tsx直接搭出一套「方块感」十足的幻灯片并理解 open-slide 主题id.mdid.demo.tsx双文件的注册与预览机制。主题定位一整套「全是方块」的视觉约束Minecraft 主题是对游戏内界面的忠实致敬每个元素都是方块。文档给出的核心设计判断是用硬像素斜角左上亮、右下暗替代柔阴影用「草绿压泥土棕」的色彩叙事铺在深色石料画布上搭配像素字体并且全站border-radius: 0。整体观感依赖游戏标志性的 GUI 构件——石质按钮、物品栏格、斜角面板——而非照片写实。主题文档 frontmatter 中声明了它的元信息name: Minecraft description: Blocky sandbox aesthetic — grass-green and dirt-brown on dark stone, pixel type, beveled GUI buttons, inventory-slot footer, zero rounded corners.它属于 open-slide 主题体系中的「双文件包」minecraft.md是面向 agent 的创作文档调色板、排版、布局、固定组件、动效minecraft.demo.tsx则是可运行的迷你演示稿正常 slide 模块export default Page[]由 dev UI 的Themes 面板加载并实时预览。两者共用同一文件 stem运行时自动配对见 packages/core/src/app/lib/themes.ts 中的Theme结构与loadThemeDemo。调色板草块叙事与备用「下界」变体主题文档给出了完整 13 色色板这是整个主题的基础。下表为原文完整色表RoleValueNotesbg#26222Bdark stone / night canvastext#F9FFFFMinecraft white-smoke copyaccent#6CC349grass green — headlines, key marks, the logoaccentDark#3E7A2Egrass shadow / green bevel 3D extrudedirt#7A5333dirt brown — surface fills, the block basedirtDark#553A23dirt shadow / bottom bevelstone#8A8A8Astone gray — GUI buttons, inventory framepanel#313036recessed dark slot / card backgroundmuted#9C9D97secondary copy, labels, footergold#FCDC5DXP / highlight accent (use sparingly)redstone#E03C32danger / emphasis accent (use sparingly)obsidian#140C20Nether obsidian — deepest dark, portal frameportal#A24CF0Nether portal purple — alt hero accentportalDark#5A18A0portal shadow / purple bevel 3D extrude在演示文件中这些色值以const p { ... }对象的形式原样落地见 apps/demo/themes/minecraft.demo.tsx同时该演示还导出了一个design常量把最核心的bg/text/accent、显示字体/正文字体、hero/body 字号与radius: 0注册为 DesignSystem 运行时令牌使主题在 Design 面板中可被实时微调export const design: DesignSystem { palette: { bg: #26222B, text: #F9FFFF, accent: #6CC349 }, fonts: { display: Press Start 2P, monospace, body: VT323, Courier New, monospace, }, typeScale: { hero: 96, body: 44 }, radius: 0, };排版像素双字体体系主题文档规定了双字体栈与对应的字号覆盖相对 slide-authoring 技能 默认字号展示字体Press Start 2P, monospace—— 方块感 8-bit 标题字体仅 weight 400。字形偏宽标题单词要短。正文字体VT323, Courier New, monospace—— 可读性好的像素/终端字体仅 weight 400。因为 x-height 偏小字号要比普通无衬线体更大44px VT323 约相当于 30px 无衬线。Google Fonts 引入https://fonts.googleapis.com/css2?familyPressStart2PfamilyVT323displayswap渲染锐利像素装饰元素必须设置imageRendering: pixelated绝不对块状图形做抗锯齿。字号覆盖相对默认值因 Press Start 2P 每字形更宽hero 字号相应调小Hero 标题96pxlineHeight: 1.08letterSpacing: 0章节标题56px Press Start 2PlineHeight: 1.2页标题40px Press Start 2P正文44px VT323约等于 30px 无衬线lineHeight: 1.3眉题/标签20px Press Start 2PletterSpacing: 0.04emuppercase布局网格与「零圆角、零阴影」铁律内容留白距画布边缘 120px1920×1080 画布。对齐hero 页左对齐单列功能页使用 3 列方块网格。borderRadius: 0处处生效——方块必须是直角无例外。斜角而非阴影所有凸起表面使用内嵌像素斜角左上亮、右下暗所有凹陷槽反转为内嵌暗角。没有模糊没有柔投影。方块网格gridTemplateColumns: repeat(3, 1fr)gap: 24px。装饰母题构成主题的四个核心构件斜角助手Bevel helper这是整个主题最重要的令牌——Minecraft GUI 按钮边缘。凸起 左上亮 右下暗凹陷 反转const raised { boxShadow: inset 4px 4px 0 rgba(255,255,255,0.22), inset -5px -5px 0 rgba(0,0,0,0.45), } as const; const recessed { boxShadow: inset -4px -4px 0 rgba(255,255,255,0.10), inset 4px 4px 0 rgba(0,0,0,0.55), } as const;像素噪声纹理 IsoBlock 等距方块主题的方块是等距的真正的 3D 立方体顶面 两个侧面并内嵌了像素噪声纹理——不是扁平的绿棕矩形。两个关键工具shade()按整数步长提亮/压暗 hex 色Pixels用一个 6×6 噪声网格填充一个面imageRendering: pixelatedconst shade (hex: string, step: number) { const n Number.parseInt(hex.slice(1), 16); const amt step * 18; const c (v: number) Math.max(0, Math.min(255, v)); return rgb(${c(((n 16) 255) amt)}, ${c(((n 8) 255) amt)}, ${c((n 255) amt)}); }; const GRASS_NOISE [0,1,-1,0,1,0,-1,0,0,1,0,-1,0,1,0,-1,1,0,1,-1,0,0,-1,1,0,0,1,-1,0,0,-1,1,0,1,0,-1]; const DIRT_NOISE [0,1,0,-1,0,1,-2,0,1,0,-1,0,0,-1,0,1,0,-2,1,0,-1,0,1,0,0,1,0,-2,0,1,-1,0,1,0,-1,0]; const Pixels ({ base, noise, cols 6 }: { base: string; noise: number[]; cols?: number }) ( div style{{ position: absolute, inset: 0, display: grid, imageRendering: pixelated, gridTemplateColumns: repeat(${cols}, 1fr), gridTemplateRows: repeat(${noise.length / cols}, 1fr) }} {noise.map((lvl, i) div key{i} style{{ background: shade(base, lvl) }} /)} /div );立方体由preserve-3d父容器中的三个Facediv 组成整体旋转rotateX(-30deg) rotateY(-45deg)正交投影 无透视。侧面叠加暗色遮罩模拟环境光遮蔽草侧面在泥土顶部叠加一段绿色「滴落」边缘。变体grass/dirt/gold/stone。完整的Face、GrassSide、IsoBlock源码可直接从 apps/demo/themes/minecraft.demo.tsx 中逐字复制IsoBlock size{104} variantgrass /从演示源码可以看到IsoBlock的实现细节容器尺寸为size * 1.5 × size * 1.4内部立方体边长size顶面用rotateX(90deg) translateZ(h)定位两个侧面分别以dim{0.16}与dim{0.34}叠加暗度遮罩——0.34 的侧面更暗符合单光源透视草变体的侧面由GrassSide渲染整面 DIRT 噪声 顶部 20% 的 GRASS 噪声 两块向下「滴垂」的绿色块。火把Torch一个像素精灵火把——棕褐手柄顶部白/黄/橙火焰带柔和mc-flicker光晕。这个光晕是「无光晕」铁律的两个特许例外之一火把理应发光另一个例外是下界传送门const TORCH [ oo , ww ,oyyo, yy , ab , ab , ab , ab , ab , ab , ab , ab ]; const TORCH_COLORS: Recordstring, string { o: #FF8A1E, y: #FFD83D, w: #FFF8D6, a: #C9A06A, b: #6E5535 }; const Torch ({ px 10 }: { px?: number }) ( div style{{ position: relative, width: 4 * px, imageRendering: pixelated }} div classNamemc-flicker style{{ position: absolute, left: 50%, top: -px * 2, width: px * 9, height: px * 9, background: radial-gradient(circle, rgba(255,200,90,0.5), transparent 65%), pointerEvents: none }} / div style{{ position: relative, display: grid, gridTemplateColumns: repeat(4, ${px}px), gridAutoRows: ${px}px }} {TORCH.flatMap((row, r) row.split().map((ch, c) ( div key{${r}-${c}} style{{ width: px, height: px, background: TORCH_COLORS[ch] ?? transparent }} / )))} /div /div );物品栏格Inventory slot凹陷的方形单元格——来自 GUI 物品栏网格的反转斜角。任何下凹容器都可以用它页脚页码块也是同款凹陷处理const Slot ({ children }: { children?: React.ReactNode }) ( div style{{ width: 56, height: 56, background: #26222B, display: flex, alignItems: center, justifyContent: center, ...recessed, }} {children} /div );固定组件四个 paste-ready 构件以下组件可直接逐字复制到使用该主题的幻灯片中。Title3D 挤出标题草绿主色 深绿像素挤出 黑色描边复刻游戏 Logo 的立体深度const Title ({ children }: { children: React.ReactNode }) ( h1 style{{ fontFamily: Press Start 2P, monospace, fontSize: 96, fontWeight: 400, lineHeight: 1.08, letterSpacing: 0, margin: 0, color: #6CC349, textShadow: 5px 5px 0 #3E7A2E, 9px 9px 0 #000, }} {children} /h1 );Footer热键栏式页脚页码放在物品栏格中品牌标记复用迷你IsoBlock size{16} variantgrass /与 hero 方块呼应。页码必须来自useSlidePageNumber()——绝不硬编码pageNum/totalimport { useSlidePageNumber } from open-slide/core; const Footer () { const { current, total } useSlidePageNumber(); return ( div style{{ position: absolute, left: 120, right: 120, bottom: 56, display: flex, justifyContent: space-between, alignItems: center, fontFamily: Press Start 2P, monospace, fontSize: 16, color: #9C9D97, }} span style{{ display: inline-flex, alignItems: center, gap: 10 }} IsoBlock size{16} variantgrass / spanMINECRAFT/span /span span style{{ padding: 10px 16px, background: #26222B, color: #F9FFFF, ...recessed }} {current} / {total} /span /div ); };底层实现上useSlidePageNumber由SlidePageProvider注入的上下文提供见 packages/core/src/app/lib/page-context.tsx上下文持有index与totalhook 返回{ current: ctx.index 1, total: ctx.total }并在脱离open-slide/core渲染环境时抛出错误。上下文实例挂在globalThis上保证 dev 与发布构建共享同一实例。Eyebrow成就提示式像素标签像成就弹出 / GUI 标签一样被框起来的像素眉题const Eyebrow ({ children }: { children: React.ReactNode }) ( div style{{ display: inline-block, fontFamily: Press Start 2P, monospace, fontSize: 20, letterSpacing: 0.04em, textTransform: uppercase, color: #FCDC5D, background: #313036, padding: 12px 18px, boxShadow: inset 4px 4px 0 rgba(255,255,255,0.18), inset -5px -5px 0 rgba(0,0,0,0.5), }} {children} /div );Button经典石质 GUI 按钮凸起斜角、直角、像素标签const Button ({ children }: { children: React.ReactNode }) ( span style{{ display: inline-block, fontFamily: Press Start 2P, monospace, fontSize: 22, color: #F9FFFF, background: #8A8A8A, padding: 20px 34px, textShadow: 2px 2px 0 #2b2b2b, boxShadow: inset 4px 4px 0 rgba(255,255,255,0.30), inset -5px -5px 0 rgba(0,0,0,0.45), }} {children} /span );动效像素网格上的阶梯动画哲学克制—— 方块以阶梯顿挫、像素网格感方式弹入而不是平滑缓动呼应游戏低帧率 UI 动画。可复用关键帧paste-readykeyframes mc-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } keyframes mc-blink { 0%, 49% { opacity: 1; } 50%, 100%{ opacity: 0; } } keyframes mc-flicker { 0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(0.96); } 50% { opacity: 0.85; transform: translateX(-50%) scale(1.04); } } .mc-pop { opacity: 0; animation: mc-pop 0.45s steps(5, end) forwards; } .mc-blink { animation: mc-blink 1s steps(1, end) infinite; } .mc-flicker { animation: mc-flicker 0.5s steps(2, end) infinite; }一律使用steps()缓动绝不用平滑 cubic-bezier让动效看起来量化在像素网格上。交错延迟0.05s、0.14s、0.24s、0.34s——任何元素不得超过 0.5s。mc-blink只用于单个尾部光标方块mc-flicker只用于火把光晕——二者不要用在别处。在演示文件中还额外出现了第四个关键帧mc-portal-glow2.6s steps(6, end) infinite用于下界传送门的紫色脉动Cover/Content页面正是用上述延迟序列0.05s → 0.14s → 0.24s → 0.34s → 0.44s把 Eyebrow、Title、正文、Torch、IsoBlock 依次弹入。美学规范与铁律清单主题文档对「什么是开主题、什么跑题」给出了极清晰的裁决标准A deck rebuilt out of Minecraft blocks. The whole thing reads as the games GUI: a dark stone canvas, grass-green as the hero color sitting on dirt-brown surfaces, stone-gray buttons, and recessed inventory slots. The hero block art isisometric— true 3D cubes (top two shaded sides) with a baked-in 6×6 pixel-noise texture, exactly like the games grass block icon — plus a pixel-sprite torch that flickers. UI depth comes exclusively from hard pixel bevels — a 1–5px light edge top-left and a darker edge bottom-right — never from blur. Type is pixel (Press Start 2P for blocky headlines, VT323 for readable body), and the title carries a stacked 3D extrude like the logo.严格规则所有元素borderRadius: 0无柔阴影无渐变无装饰性 emoji所有方块/精灵图imageRendering: pixelated。只有两处特许光晕——火把的暖色径向火焰与下界传送门的紫色微光两者在游戏中都会发光其余元素一律不发光。如果一样东西放不进生存模式的物品栏它就是跑题的。「下界」变体更热的调色板需要更暗的「下界」风格时用传送门紫替换草绿portal #A24CF0压黑色obsidian #140C20——同样的斜角与像素规则更热的调色板。演示文件为此提供了完整实现OBSIDIAN_NOISE8 列噪声配合SPECKLES12 组紫色斑点坐标渲染黑曜石方块纹理NetherPortal用 4×5 网格按边框坐标r 0 || r 4 || c 0 || c 3铺满黑曜石块中间 2×3 区域以#0E0718打底并叠加mc-portal-glow的screen混合紫色径向光Nether页面的标题STEP THROUGH使用textShadow: 5px 5px 0 #3A1466, 9px 9px 0 #000与传送门紫色一致。完整示例从 Cover 到功能页主题文档给出的封面示例在原文档中可直接照抄const Cover: Page () ( div style{{ width: 100%, height: 100%, background: #26222B, color: #F9FFFF, fontFamily: VT323, monospace, padding: 120, display: flex, flexDirection: column, justifyContent: center, gap: 40, position: relative, overflow: hidden, }} EyebrowPress Start/Eyebrow TitleBUILDbr /ANYTHING/Title p style{{ fontSize: 44, lineHeight: 1.3, color: #9C9D97, maxWidth: 1100, margin: 0 }} A blocky sandbox where every idea snaps onto a grid. /p Footer / /div );演示文件在此基础上进一步展示了 4 页完整骨架Cover→Content→Nether→Closer可作创作参照Cover右上角三连IsoBlock size{96}延迟 0.34s 弹入、右下角Torch px{12}0.44s、Eyebrow「Press Start」、Title「BUILD ANYTHING」、正文末尾接mc-blink绿色下划线光标。ContentEyebrow「Inventory」 标题「PICK A BLOCK」 3 列FeatureCard网格gridTemplateColumns: repeat(3, 1fr),gap: 24每卡头部居中放置IsoBlock size{132}grass / dirt或Torch px{14}分别延迟 0.24s / 0.30s / 0.36s。Nether左右分栏左侧 Eyebrow「The Nether」 72px 紫色标题「STEP THROUGH」 正文右侧NetherPortalfilter: drop-shadow(0 0 40px rgba(162,76,240,0.45))在 0.34s 弹入。Closer居中布局左右各一支Torch px{13}Eyebrow「Achievement Get!」、Title「LEVEL UP」、Button「PLAY AGAIN」收尾照应游戏成就系统。主题在 open-slide 中的运作机制理解主题如何被注册与消费有助于在创作时对齐预期双文件包约定按 create-theme 技能 的规范主题 themes/id.mdagent 面向的创作文档create-slide选取主题时读取themes/id.demo.tsx可在 Themes 面板实时预览的迷你演示稿。两者共享文件 stem 自动配对演示文件必须自包含——内联与 md 完全一致的 Title / Footer / Eyebrow 组件不引入/别名与 slide 专属助手。注册表与预览packages/core/src/app/lib/themes.ts 通过virtual:open-slide/themes虚拟模块读取原始主题列表Theme类型包含id/name/description/bodymarkdown 正文与hasDemopackages/core/src/app/routes/themes.tsx 提供画廊页与详情页/themes/id详情页由ThemeDetail渲染loadThemeDemo动态加载演示模块并放进SlideCanvas1920×1080中呈现。主题 vsdesign常量主题 md 是创作期美学方向被create-slide复制进真实 slide每个 slide 顶部可选的export const design: DesignSystem { palette, fonts, typeScale, radius }是运行时可调令牌Design 面板实时微调id.demo.tsx让主题可预览。三者各司其职Minecraft 演示正好三者齐全。对 slide 创作的优先级按 slide-authoring 技能 的规则一旦themes/id.md存在且 slide 声明跟随该主题主题文件的调色板、排版、布局留白、Title/Footer 组件即对默认值拥有最高优先级——这正是 Minecraft 主题里 96px hero 等覆盖值的效力来源。实战检查清单落地一套 Minecraft 主题演示时请逐项核对色板严守 13 色范围accent草绿只用于标题/关键记号/Logogold、redstone仅少量点缀所有元素borderRadius: 0凸起用raised斜角、凹陷用recessed斜角无柔投影、无渐变所有方块/精灵容器设置imageRendering: pixelatedhero 标题 ≤ 96pxPress Start 2P 字形宽正文用 44px VT323内容留白 120px功能页 3 列网格repeat(3, 1fr)/gap: 24px页脚页码来自useSlidePageNumber()不硬编码动效只用steps()交错延迟 ≤ 0.5smc-blink仅尾部光标、mc-flicker仅火把光晕仅两处特许火把暖光与可选下界传送门紫光若需要「下界」变体整体替换为portal/obsidian色系并保持斜角与像素规则遵循以上规范你就能在 open-slide 里搭建出从封面到收尾全程「方块化」的完整演示且与官方 Minecraft 主题的视觉语言严格一致。赞分享【免费下载链接】open-slideA slide framework built for agents.项目地址https://gitcode.com/gh_mirrors/op/open-slide点击查看免费下载相关推荐Minecraft光影告别像素感打造电影级方块世界Minecraft光影告别像素感打造电影级方块世界 你是否厌倦了Minecraft里灰蒙蒙的天空是否觉得水面像一块静止的塑料板别担心今天我要给你介绍一3D渲染图形学游戏开发Fun Emoji 风格头像生成指南用 DiceBear 打造表情风彩色方块头像Fun Emoji 风格头像生成指南用 DiceBear 打造表情风彩色方块头像 Fun Emoji 是 DiceBear 提供的一种极简表情头像风格在一张UI组件后端tsParticles Tetris 调色板用经典俄罗斯方块七色打造粒子配色方案tsParticles Tetris 调色板用经典俄罗斯方块七色打造粒子配色方案 导读 本文介绍 tsParticles 官方调色板 tsparticles前端上一篇PT-Plugin-Plus浏览器插件PT站点资源管理的终极助手下一篇ProxyPin命令行参数详解高级用户的隐藏功能开关创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考