Omd:shader Hero
One full-bleed launch hero in two inks from the project's DESIGN.md: the base color and...
Install
npx skills add kwakseongjae/oh-my-design --skill omd:shader-hero -g -a claude-code -y- Repository
- kwakseongjae/oh-my-design552
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 2,646 tokens
- Runs scripts
- Yes, review before use
What it does
One full-bleed launch hero in two inks from the project's DESIGN.md: the base color and exactly one brand color, as a slowly folding ordered-dither (Bayer) field, a print/riso look, not a generic gradient. Two flat inks never blend, so there is no mud. The copy sits on a hard-edged base-ink knockout, so headline and sub copy both clear 4.5:1 by construction, and a verify script measures it across the whole timeline. Reads Core v2 tokens (and Google-compatible frontmatter), refuses to invent a palette, ships a CSS halftone poster fallback, respects prefers-reduced-motion, ~7 KiB gzip of library JS. Use for a launch page, product hero, waitlist, event or rebrand first screen that needs motion in brand color. Triggers: '셰이더 히어로', '런칭 히어로', '디더링 배경', '리소 느낌 히어로', '브랜드 컬러 배경 애니메이션', 'dither hero', 'shader hero from DESIGN.md', 'launch hero background', 'riso print hero', 'シェーダーのヒーロー', '著陸頁主視覺 shader'. Whole scroll-native landing → omd-landing / omd-aphrodite. CJK headline ink effect → omd-cjk-type-shader. Brand tokens missing → omd-init first.
omd-shader-hero, one scene, two brand inks
A launch hero gets one look from someone who owes you nothing. Mesh gradients are the most generic shader look on the web, and blending two complementary brand hues turns them brown. This skill does the opposite: two flat inks, the base color and one brand color, printed as an ordered-dither field that folds slowly like light through a screen print. Every pixel is one ink or the other, so nothing blends and nothing goes muddy. The copy sits on a hard-edged knockout in the base ink, like a cut-out panel on a riso poster.
The script picks both inks, the text color and the contrast from DESIGN.md. No color is chosen by taste.
Working example: examples/hero.html, filled from the fictional examples/DESIGN.example.md. Scripts: scripts/tokens.mjs (inks + contrast), scripts/verify.mjs (real-render proof).
1. When to use / when not
Use when:
- a launch, product, waitlist, event or rebrand page needs one first screen with motion;
- the project has a
DESIGN.mdwith a brand color and a dark (or light) base (Core v2 Foundations tokens, Foundations prose pairs, or Google-compatiblecolors:frontmatter); - a graphic, printed, confident look fits the brand.
Don't use when:
- there is no DESIGN.md or no brand color.
tokens.mjsexits 3 and you stop; runomd-initor ask. Never pick "nice" colors to fill the gap (unknown means absent); - the brand is soft, photographic or luxury-quiet. A dither field is loud. Use the brief's photography instead (tf-shaders "photo first");
- the page needs several shader scenes. One scene, plus at most one small accent elsewhere (tf-shaders rule). For a whole scroll story use
omd-landing.
