以下为本文档的中文说明sprite-animation 技能专注于精灵动画Spritesheet Animation技术的创建、实现和优化。精灵动画是一种经典的 2D 动画技术通过按顺序快速切换显示一系列静态图像帧来产生连续运动效果的视觉错觉广泛应用于电子游戏开发、Web 交互设计和用户界面动效中。使用场景包括在网页游戏或 2D 平台游戏中实现角色行走、奔跑、跳跃、攻击等动作动画序列、为 Web 应用和品牌网站添加富有表现力的交互动画以增强用户体验、创建基于 HTML5 Canvas 或 CSS 的轻量级动画系统。核心特点包括支持从精灵图集Sprite Sheet和精灵条Sprite Strip中自动提取动画帧并计算帧坐标和尺寸提供完整的动画播放控制接口包括播放Play、暂停Pause、停止Stop、循环模式Loop和帧速率Frame Rate的动态调节支持基于 Canvas 2D API 的高性能渲染利用离屏缓冲区优化绘制性能包含有限状态机Finite State Machine的动画状态管理机制支持不同动画状态如待机 Idle、行走 Walk、攻击 Attack、受伤 Hurt之间的条件切换支持基于矩形包围盒AABB的碰撞检测和动画关键帧事件回调机制提供精灵动画的多种性能优化策略包括帧缓冲技术、增量渲染和视口裁剪。Sprite Animation SkillProduce a single animated frame of an educational explainer — the kind youmight screen-record into a vertical video. Pixel-art mascots, big yeardisplay, looping CSS animations, kinetic Japanese / English display type.WorkflowRead the active DESIGN.md(injected above). Pick the loudest seriftoken for the year, a sturdy sans for headlines, and a mono token fortimeline / index labels.Pick the topicfrom the brief (e.g. “Nintendo · 1889 — Hanafuda”).You always need: a year, a one-line headline, an animated subject (apixel sprite — character, object, or icon), and a short caption.Stage— full-bleed cream / off-white background (#f5efe2) with asubtle paper grain. Keep margins generous; this is one beat of a video.Top bar— small mono row:Left: title slug (“名次の/番組” or “EP. 01 / NINTENDO”)Right: progress dots (“01 / 12”) and a “REC” stampSubject animations— at least three independent looping animationson the page:Big year: the headline year (e.g. “1889年”) fills the lower-left,in a serif display weight. It has a subtle vertical glitch / scanlineanimation (clip-path keyframes), and a 1-frame “pop” every loop.Pixel sprite card: a 96×128 pixel-art card or character (use aninline SVG with crispshape-rendering: crispEdgesrectangles, or abox-shadowpixel grid). Subtle bobbing animation (±4px, 1.6s).Kinetic kana: 1–2 Japanese / kanji characters that fade-and-slidein sync with the bob (e.g. “花” —hana— flower).Tick ribbon: bottom of the stage, a tape/ribbon with year ticks(1889 · 1907 · 1949 · 1977 · 1985 · 2006 · 2017) sliding left at aslow constant speed.Caption block— small mono caption explaining the trivia:“Nintendo started as a Hanafuda playing-card maker in Kyoto, 1889.Mario didn’t show up for another ninety-six years.”Writea single HTML document:!doctype htmlthrough/html, CSS inline, no external JS.All animations usekeyframesanimation: ... infinite.Stage uses a fixed canvas ratio (e.g. 16:9 letterboxed) so the loopreads as a single frame from a video.data-od-idon stage, year, sprite, caption, and tick ribbon.Self-check:The page is one cohesive scene, not a collage. The eye lands on theyear first, then the sprite, then the caption.At least 3 independent looping animations are visible.The color palette is restrained (cream a single accent red ink).No external assets — all sprites are inline SVG or CSS.Output contractEmit betweenartifacttags:artifact identifiersprite-anim-slug typetext/html titleSprite animation — Title !doctype html html.../html /artifactOne sentence before the artifact, nothing after.3c:[“ , ,,L45”,null,{“content”:“$46”,“frontMatter”:{“name”:“sprite-animation”,“description”:A pixel / sprite-style animated explainer slide — full-bleed cream stage,bold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom,or 8-bit console), kinetic Japanese display type, ticking timeline ribbon.Reads like a single frame of an educational motion video — looping CSSkeyframes, no JS, ready to be screen-recorded into a vertical video.Use when the brief asks for a \“sprite animation\”, \“pixel-art video\”,\“8-bit explainer\”, \“history of X explainer\”, \“kinetic typography history\”,\“Nintendo-style\”, \“精灵图动画\”, \“像素动画\”, or \“复古动画\”.,“triggers”:[“sprite animation”,“pixel art animation”,“8-bit explainer”,“retro animation”,“kinetic typography”,“history explainer”,“nintendo style”,“精灵图”,“像素动画”,“复古动画”],“od”:{“mode”:“prototype”,“platform”:“desktop”,“scenario”:“marketing”,“preview”:{“type”:“html”,“entry”:“index.html”},“design_system”:{“requires”:true,“sections”:[“color”,“typography”,“layout”,“components”]},“example_prompt”:“Create a sprite-based animation introducing trivia about Nintendo’s history. Combine pixel mascots, animated text, and a Hanafuda accent. Use color and type that feel like the Nintendo brand.”}}}]47:I[206516,[“/_next/static/chunks/051aanbhrv4br.js”,“/_next/static/chunks/0mizr60h7ayzt.js”,“/_next/static/chunks/0v9lm1dmbdoo-.js”,“/_next/static/chunks/0rxr1j1j3j-.r.js”,“/_next/static/chunks/02ftybezfvqjd.js”,“/_next/static/chunks/0.v9ksvnnj8ia.js”,“/_next/static/chunks/0bn6id96nx3k.js,“/_next/static/chunks/13ybnhn37c.tc.js”,“/_next/static/chunks/0_fnrdtruz8uf.js”,“/_next/static/chunks/0r6l15utt1mwb.js”,“/_next/static/chunks/0dm9a5into854.js”,/_next/static/chunks/07k6hqoibtcn.js”,“/next/static/chunks/0b4cao.4y…j.js”,“/_next/static/chunks/02i-n28z7kjd0.js”],“default”]3f:[“ , ,,L47”,“nexu-io-open-design-plugins-official-examples-3d-creator-portfolio-skill-md”,{“ref”:“u n d e f i n e d , h r e f : p a t h n a m e : / z h / s k i l l s / n e x u − i o − o p e n − d e s i g n − p l u g i n s − o f f i c i a l − e x a m p l e s − 3 d − c r e a t o r − p o r t f o l i o − s k i l l − m d , p a r a m s : i d : n e x u − i o − o p e n − d e s i g n − p l u g i n s − o f f i c i a l − e x a m p l e s − 3 d − c r e a t o r − p o r t f o l i o − s k i l l − m d , l o c a l e : undefined,href:{pathname:/zh/skills/nexu-io-open-design-plugins-official-examples-3d-creator-portfolio-skill-md,params:{id:nexu-io-open-design-plugins-official-examples-3d-creator-portfolio-skill-md}},locale:undefined,href:pathname:/zh/skills/nexu−io−open−design−plugins−official−examples−3d−creator−portfolio−skill−md,params:id:nexu−io−open−design−plugins−official−examples−3d−creator−portfolio−skill−md,locale:undefined”,“localeCookie”:{“name”:“NEXT_LOCALE”,“sameSite”:“lax”},“target”:“_blank”,“rel”:“noopener noreferrer”,“className”:“group flex min-h-36 flex-col rounded-md border border-border bg-background/60 p-4 transition-colors hover:border-primary/60 hover:bg-muted/30”,“children”:[[“KaTeX parse error: Expected }, got EOF at end of input: …,children:[[”,“div”,null,{“className”:“min-w-0”,“children”:[[“ , d i v , n u l l , c l a s s N a m e : t r u n c a t e t e x t − s m f o n t − s e m i b o l d t e x t − f o r e g r o u n d g r o u p − h o v e r : t e x t − p r i m a r y , c h i l d r e n : 3 d − c r e a t o r − p o r t f o l i o ] , [ ,div,null,{className:truncate text-sm font-semibold text-foreground group-hover:text-primary,children:3d-creator-portfolio}],[,div,null,className:truncatetext−smfont−semiboldtext−foregroundgroup−hover:text−primary,children:3d−creator−portfolio],[”,“div”,null,{“className”:“mt-1 truncate text-xs text-muted-foreground”,“children”:“nexu-io/open-design”}]]}],[“ , ,,L14”,null,{“ref”:“KaTeX parse error: Expected EOF, got } at position 319: …onWarning:true}̲]]}],[”,“p”,null,{“className”:“mt-3 line-clamp-2 text-sm leading-6 text-muted-foreground”,“children”:“Use this plugin when the user wants a dark, premium 3D-creator / designer portfolio landing page: a full-viewport hero with a gradient-text headline and a mouse-following magnetic 3D portrait, a scroll-driven horizontal image marquee, an About section with corner 3D decorations and character-by-character scroll-reveal text, a white Services list, and sticky-stacking project cards. Invoke for ‘3D creator portfolio’, ‘designer landing page’, ‘creative portfolio with magnetic hero’, or when the user references the Jack 3D Creator template.”}],[“KaTeX parse error: Expected }, got EOF at end of input: …,children:[[”,“span”,null,{“className”:“inline-flex items-center gap-1.5”,“children”:[[“ , ,,L14”,null,{“ref”:“KaTeX parse error: Expected EOF, got } at position 337: …onWarning:true}̲],2026-06-09]…”,“span”,null,{“className”:“inline-flex items-center gap-1.5”,“children”:[[“ , ,,L14”,null,{“ref”:“$undefined”,“iconNode”:[[“path”,{“d”:“M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z”,“key”:“r04s7s”}]],“className”:“lucide-star text-yellow-500”,“size”:13,“fill”:“currentColor”,“aria-hidden”:“true”,“suppressHydrationWarning”:true}],“62.5k”]}]]}]]}]