grainient
SolidRecreate grainient.supply's 16 dark-mode visual effects as single-file HTML pages: WebGL shader gradients, vignette overlays, 9-layer box shadows, smooth scroll, spring animations, hover-zoom, ticker marquees, glassmorphism, 3D card flips, bento grids, gradient CTAs. Dark-mode-first with lime green (#C2F13C) accent. Triggers on grainient effects, dark-mode landing page, cinematic depth, glow effects, SaaS showcase, visual effects page.
Install
Quality Score: 85/100
Skill Content
Details
- Author
- tdimino
- Repository
- tdimino/claude-code-minoan
- Created
- 8 months ago
- Last Updated
- today
- Language
- Python
- License
- MIT
Similar Skills
Semantically similar based on skill content — not just same category
aesthetic-presets
Whole-scene aesthetic presets for motion-graphics videos — combinations of background + element + type that read as one recognizable style. Isometric UI (planes on a 30° grid, floating, long shadow), collage/cutout (flat color + photo cutouts + torn-paper stickers + doodle connectors + halftone + timeline), Apple-minimalist (huge negative space, one shape/word, slow eases, thin type), crypto/neon-glow (near-black + starfield + neon edges + spinning 3D token), and dashboard-reveal (UI window rises in, charts grow, counters tick). Use when you want a named look for a whole scene/video, or matching a specific reference style. Triggers: "isometric style", "collage / cutout animation", "Apple-style minimalist", "crypto / web3 neon look", "dashboard reveal", "make it look like [that style]".
motion-graphics
Super-skill for motion-graphics videos in HTML/CSS/JS — the launch-reel / SaaS-explainer look. An umbrella over sub-skills for TEXT motion, BACKGROUNDS & GRADIENTS, ELEMENT / SHAPE / PARTICLE motion, GLASS & UI accents, PRODUCT composition, SCENE TRANSITIONS, and UI / DATA motion. Holds a named "platter" of ~40 reusable moves (each with a render-safe recipe) plus a drop-in building- block library (assets/motion.css + motion.js). Use when the user wants to build or restyle an animated title, explainer, launch/promo film, or any motion-graphics piece; make headings/scenes more dynamic; add moving gradients, drifting shapes, glowing rings/orbs, glass UI, transitions, animated charts/counters; match a reference reel; or asks for "the platter of skills / motion skills / a menu of effects". Composes with text-motion, kinetic-typography, glass-cards, smooth-render, vo-sync.
motion-pages
Build production-ready immersive motion pages in the award-site mold — Three.js worlds (foggy heroes, glass product stages with sonar rings, drag-orbit dome galleries, scroll-driven camera journeys with particle morphs, walkable procedural game worlds with HUD chrome) AND non-Three.js motion (raw-WebGL liquid-glass ripple typography, springy draggable poster walls, cursor-trail image reveals, horizontal scroll-snap stories, scroll-scrubbed process reveals, cursor mask reveals, gesture control) — each a single HTML file with a crisp DOM overlay, responsive to phone/tablet, touch-aware, with a mandatory multi-viewport screenshot loop and a design-review (aesthetic + conversion) pass. Use when asked for a "3D landing page", "Three.js hero", "living/breathing homepage", a 3D product page, a 3D gallery, a scroll-story page, "liquid glass", a ripple/distortion hero, a draggable poster wall, "images that follow the cursor", a horizontal-scrolling story, a "scroll to build it" process explainer for a business, a game