Hubbestaiskill.com

Home / All Skills / Content & Media Creation / isometric-animation

Content & Media Creation · iart-ai/explainer-video-skills

isometric-animation

This skill should be used when the user asks to "make an isometric animation", "build a 2.5D isometric scene", "create an isometric infographic", "animate an exploded diagram", "do an isometric city/stack build", "show stacked layers in iso", "extrude blocks with depth", or "add a gentle camera drift to an iso scene". Covers CSS 3D transforms, SVG iso planes, and Three.js OrthographicCamera for true 3D iso — no build step.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit

Author iart-aiGitHub iart-ai/explainer-video-skills ↗Stars 26License MIT（仓库根 LICENSE：MIT License / Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 声明 "license": "MIT"，GitHub API license.spdx_id = MIT）Commit 3e2d411b72

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Projection first: pick one of two conventions upfront (true isometric axes at ±30° vs. 2:1 dimetric axes at ~26.57°) and never mix them—if the axis system is wrong, everything downstream breaks.

skills/isometric-animation/SKILL.md

Two conventions — pick one and never mix:

Reduces "does this look isometric?" to a single geometric choice, hanging all downstream code and validation checks on it.

Project any flat plane into an isometric ground using CSS 3D transforms: rotateX(60deg) rotateZ(45deg) is the standard true-iso combo, turning any 2D SVG/DOM element (floor plans, UI mockups, grids) into an iso plane, with child elements lifted along translateZ.

skills/isometric-animation/SKILL.md

.iso-plane { transform: rotateX(60deg) rotateZ(45deg); }

Explains why "one div + two rotates" can replace a full 3D engine: isometric projection is essentially an affine transformation of a 2D plane.

Volumetric depth relies on per-face shading: top face is lightest, left face is medium, right face is darkest, under a scene-wide fixed light direction—noted as the most critical technique for convincing iso depth.

skills/isometric-animation/SKILL.md

.block .top { background:#3a9bff; } /* lit */

The SVG implementation similarly uses light, medium, and dark polygons, keeping shading rules portable across CSS and SVG.

Scenes are assembled from four reusable building blocks: stacked Z-layers (cards/floors), extruded blocks (faces + shading), iso grids, and exploded views (sharing a unified --gap variable for expansion/collapse).

skills/isometric-animation/SKILL.md

Keep one shared `--gap` variable so the whole stack opens/closes together.

A shared variable turns "assembly/explosion" into a two-way playback of a single value rather than two separate animations.

Motion rules are framed as prohibitions to preserve isometric credibility: elevation must strictly use Z (no fake-height scaling), camera drift must remain subtle and slow, and staggering must follow physical bottom-to-top order rather than DOM order.

skills/isometric-animation/SKILL.md

**Lift along Z, never scale** to fake height — scaling breaks parallel projection.

Prohibitive guidelines define this document's core style: blocking common "fake depth" pitfalls upfront.

Upgrade to Three.js OrthographicCamera when true occlusion, real shadows, or 3D rotations are needed: equal position values yield the classic 30° viewpoint, while an orthographic camera prevents distant objects from shrinking; PerspectiveCamera is explicitly disqualified as iso.

skills/isometric-animation/SKILL.md

cam.position.set(10, 10, 10); // equal X,Y,Z → classic iso vantage

The upgrade path provides clear criteria (occlusion / shadows / rotate in 3D), rather than a vague suggestion to use Three.js for more power.

Deliverable = single-file HTML + a single primary timeline + ?t=N freezing; verification focuses on geometric correctness (axis angles, Z-sorting/occlusion, absence of z-fighting, no accidental perspective foreshortening) rather than merely checking if it animates.

skills/isometric-animation/SKILL.md

**INSPECT the projection, not just "did it animate":

Shifts validation from "motion exists" to "geometry is correct," sharing heritage with diagram-animation in the same pack but with completely different checklist items.

Parallel projection discipline is enforced throughout: CSS scenes must set perspective:none (or an excessively large value), and Three.js must use an orthographic camera—otherwise, small perspective values read as tilted 3D cards rather than isometric projections.

skills/isometric-animation/SKILL.md

Keep `perspective` OFF (or very large) — iso is parallel projection, so far objects must NOT shrink.

Elevates the projection type into a strict contract for deliverables rather than a stylistic preference.

2Core Capabilities

01Two projection conventions (true iso ±30° / 2:1 dimetric ~26.57°) + grid-to-screen coordinate conversion formulas

02Flat plane to iso plane (CSS 3D transforms, including premultiplied matrix3d equivalents; un-rotating labels to form billboards)

03Three-face shading for extruded blocks (CSS and SVG variants; SVG relies on draw order instead of depth buffering to solve occlusion and z-fighting)

04Stacked Z-layers and bottom-up builds (staggered by physical --z order rather than DOM order)

05Exploded views: unified expansion and collapse via a shared --gap variable (assembly/explosion as two-way playback of one value)

06Iso grids: drawn flat, deformed via iso-plane transforms, and traced stroke-by-stroke with stroke-dashoffset

07Camera drift / cursor parallax / hover Z-elevation (kept subtle and slow to avoid exposing the flat underlying nature)

08True 3D iso scenes with Three.js OrthographicCamera (driven by a single progress value for builds, freezable via ?t for deterministic screenshots)

3External Dependencies

Kind	Dependency / Endpoint
cli	npx / Playwright（无头截图）
cli	ffmpeg（contact-sheet.sh 拼图）
cli	npx -y playwright（仓库根 seek-shot.sh 内部）
network	jsDelivr CDN：three.js（reference 里钉的是 0.160 具体版本）
network	jsDelivr CDN：gsap ESM（未钉版本，走 +esm 浮动入口）
package	第三方库/能力：Three.js、GSAP；CSS 3D 与内联 SVG 路线零依赖

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Graded/per-use authorization, sandbox recommended

For Administrators

Approval workflow, rollback support, full audit

Evidence & Triggers (File Paths & Excerpts)

scripts/: Local script or command execution: npx playwright screenshot --wait-for-timeout=500 … (inline command in SKILL.md Verify loop)
网络端点: External network access declaration: The skill itself makes no runtime business API calls; network access originates from the toolchain—npx fetches playwright packages from registry.npmjs.org and downloads Chromium binaries
本地工作目录: File I/O and artifact outputs: frame-mid.png (inline screenshot example output in SKILL.md), frame-<t>.png (seek-shot.sh output)

Audit Notes: The evaluation target is the skill directory itself (skills/isometric-animation/: SKILL.md + references/ + 0-byte README.md; containing no scripts, credentials, or disk write logic). What triggers the amber tier is its specified verification loop and delivery format: ① SKILL.md's Verify loop embeds `npx playwright screenshot …`, and the referenced repository root helper `scripts/seek-shot.sh` executes `npx -y playwright screenshot`—npx fetches packages from the npm registry and downloads Chromium binaries on first run, falling under the classification criteria for "reliance on third-party plugins, mirrors, or remote packages" (consistent with the logo-animation precedent in the same author pack); ② Browser deliverables fetch three.js (pinned to 0.160) and gsap (floating version) from cdn.jsdelivr.net—these are artifact-phase references and, per batch rules, are listed for disclosure rather than treated as runtime data exfiltration. The skill does not access credentials/env, call external business APIs, perform data harvesting, or bypass security boundaries, precluding a red tier. Trigger condition: remote package fetching occurs only when executing the verification loop (screenshots/montages); generating HTML or manually inspecting in a browser triggers no network calls.

5Second-Pass Verification

[ok] 外部依赖调用点复核（npx playwright / ffmpeg / three.js / gsap） — SKILL.md Verify loop 内确有 `npx playwright screenshot --wait-for-timeout=500 "file://$PWD/iso.html?t=1.2" frame-mid.png`；仓库根 scripts/seek-shot.sh 与 contact-sheet.sh 分别为 npx playwright 与 ffmpeg；reference 第 7 节确有 `import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.160/build/three.module.js";` 与 `import gsap from "https://cdn.jsdelivr.net/npm/gsap/+esm";`。四条均落地。
[ok] 投影主张与代码对账 — `rotateX(60deg) rotateZ(45deg)` 与 reference 给出的 matrix3d 预乘常量（0.707 / 0.409 / 0.816）自洽：cos30≈0.866…、sin30=0.5 与 0.707/0.409 的推导一致，能把地面轴压到屏幕 ±30°；Three.js 用的确为 OrthographicCamera 且 position 三分量相等（10,10,10）→ 经典 iso 视角。未见「用 PerspectiveCamera 冒充 iso」的自相矛盾。
[ok] 无凭证 / 无 env / 无业务 API 反查 — 两个文档与三个仓库脚本中无 API_KEY/token/secret/.env 读取、无 curl/wget、无 fetch 到业务端点；唯一远程动作是包管理器与 CDN 静态资源。判 orange 的依据是「远程包/镜像」，不含凭据读取。
[ok] 目录资产面清点 — skills/isometric-animation/ 下仅 SKILL.md（178 行）、references/ 一份 253 行 cookbook、0 字节 README.md；无 scripts/、无模板、无数据文件——「纯指令 + 内联代码片段」结论成立。
[discrepancy] CDN 依赖的版本纪律差异 — 同一份 reference 内两种取法并存：three.js 钉到 0.160（可复现），gsap 走 `+esm` 浮动入口（上游发新版本即变）。这不是错误，但使「同一份 HTML 长期行为一致」的保证只覆盖 three.js 一侧；已在 verdict.risks 中标注。
[discrepancy] 跨引用可解析性 — SKILL.md 引用的 `scripts/seek-shot.sh`、`scripts/contact-sheet.sh` 位于仓库根，单装本 skill 目录会悬空（需装整个 repo）；正文把「成为视频的一部分」的路径交回同 repo 的 Remotion 路线（remotion still 验证），该技法的归属 skill（remotion-video）不在本 repo 的 5 个 skill 中。
[ok] 功能声明 vs 实际能力 — frontmatter 宣称覆盖 CSS 3D transforms / SVG iso planes / Three.js OrthographicCamera 且强调 no build step；正文 Build-tool choice 与 reference 第 1–7 节逐条兑现，交付确为单文件 HTML（CDN 方式），无夸大。

6Verdict & Scenarios

Defines isometric correctness through verifiable geometric criteria (axis angles, preserved verticals, no perspective foreshortening, single-light-source shading), eliminating subjective acceptance

Transforms any flat graphic into an isometric surface with just two rotates without requiring a full 3D engine—delivering a high output-to-complexity ratio

Proactively blocks the most common fake-depth errors (elevating strictly along Z instead of scaling, enforcing perspective:none)

Models explosion and assembly as bidirectional playback driven by a single shared variable rather than two disjoint animations

Best for: Ideal for visualizing structural relationships with physical weight: stacked layers/floors/tech stacks, extruded block infographics, exploded diagrams (assembly and disassembly), isometric grid maps, and 2.5D illustrations that need subtle camera drift/parallax to bring static graphics to life. Three implementation tiers (CSS 3D / inline SVG / Three.js Orthographic) allow choosing based on block count versus the need for true occlusion.

Not for: Not suitable for scenes requiring true perspective and realistic depth of field (cinematic camera motion)—it deliberately forbids perspective. Not suitable for heavy dynamic geometry or physics simulations (which should use standard Three.js/WebGL pipelines; this skill caps at orthographic iso). Also not suitable for text-heavy layouts with minimal geometric structure where projection discipline is irrelevant.

Install Agent-Ready

① Verified Mirror 2026-09-28

Option A · Direct DownloadDownload isometric-animation.tar.gz

sha256: 0e7ea0aa5a9ac077…

Option B · Copy Guide for Agent

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 3e2d411b72.