designmotioneffectsshadersanimationdesign-foldercreative-codingfrontendUpdated 2026-07-07

Design Effects and Motion Sources

The broad effects shelf for Kevin's design folder: animation engines, shader backgrounds, component effects, dither/ASCII tools, and showcase feeds.

This page is the routing layer above Shader Effects Libraries. Use it when a design task needs a distinctive motion or visual-treatment reference before implementation. The implementation still has to pass Design and Animation, Interface Micro-Polish, accessibility, and browser verification.

View original tweet
View original tweet
View original tweet
View original tweet
View original tweet
View original tweet
View original tweet
View original tweet
View original tweet
View original tweet

Quick route

Need Start with Notes
Choose a motion library Motion Library Ranking Rank Motion.dev, Motion Primitives, Anime.js, GSAP, and copy-paste effect sources before adding animation dependencies.
Product UI motion engine Motion.dev Use for React/JavaScript/Vue app motion, layout transitions, gestures, springs, and enter/exit states. Current package snapshot: motion@12.42.2 and framer-motion@12.42.2, checked 2026-07-07.
Animated shader or hero background Shader Effects Libraries ShaderGradient, Shaders.com, Shader Lab, Shader Gallery, and Paper/LiquidMetal references.
Copy-paste React background/effect Component Library Sources + React Bits / Magic UI / Kokonut UI React Bits Liquid Chrome, aurora/plasma/particles, text effects, Magic UI structural effects, Kokonut animated components, Fancy Components, and other registry-style effects.
Small live text shimmer Gradient Shimmer + Interface Micro-Polish Use for narrow status labels, active channels, or live-agent affordances. Keep reduced-motion fallbacks and avoid stacking shimmer effects.
No-code WebGL/prototyped interaction Unicorn Studio Use for fast visual proofs: dither, glyph texture, mouse trail, god rays, and embed/export decisions.
Editable React/Tailwind motion primitive Motion Primitives Use for animated primitives before custom Motion code.
Easing curve selection/export Easing Graphs Use named curve cards and direct CSS/Motion/native exports instead of asking agents to invent bezier values.
Figma-drawn SVG interaction study Motion Animation Style Draw the static geometry in Figma, export clean SVG, then animate hover/click states with Motion.
Playful web interaction reference Creative Web Interaction References Use for physical-load input, music-as-input, multiplayer coding, typography games, personal maps, digital galleries, scale education, sound interfaces, and terminal skin references.
Timeline and choreographed UI motion Design and Animation + Animation Vocabulary (Animations.dev) Pair GSAP/Anime inspiration with the local motion rules before shipping.
Launch explainer video Design and Animation + Skale-style product motion Use for compressed product storytelling: abstract workflow, crisp UI frames, animated type, and benefit framing.
Explanatory product illustration motion Technical Illustration System + Design and Animation Animate the illustration when the product story depends on flow, ordering, state change, or proof movement. Keep static copy and CTAs stable.
Pseudo-technical brand poster Technical Illustration System + this page Use sparse diagrams, coordinates, model labels, small logos, copyright marks, and system microcopy as brand grammar. Do not treat the labels as real source authority.
Parametric motion-tuning console Design and Animation + DialKit Use live sliders and grouped controls to tune spatial/motion geometry before committing values. Good for parallax, waves, bars, and complex decorative components.
Scroll or agency-grade motion study Design Inspiration Galleries + Design Agencies Reference Awwwards/GSAP Showcase/agency portfolios for rhythm and transitions.
Static SVG background/pattern asset Haikei Export SVG assets, retokenize, and verify contrast.
Texture, dither, ASCII, pixel, voxel Dither, ASCII Magic, Texture & Grain Resources Use as a deliberate art direction, not as a novelty overlay.
Light editorial dither + ASCII motion ASCII Magic + Design and Animation Use for quiet brand/editorial sections: large dithered photographic forms, sparse serif copy, and slow motion. Keep text crisp and contrast high.
Generative code-ecosystem interface Creative Web Interaction References + p5js-style sketches Use red-grid, telemetry, wireframe cube, and living-terminal motion as art direction for computational/editorial surfaces, not as OS product architecture.
Japanese typography + dither motion Dither + Design and Animation Use as visual vocabulary for editorial/brand sections: vertical kana/kanji, blue monochrome dither, bilingual microcopy, and restrained aquatic motion.
Subtle dithered product-data motion Dither + Evil Charts + Interface Micro-Polish Use halftone/dither texture on chart fills when a dashboard needs a distinctive visual layer without making the data hard to read. Keep labels crisp and motion slow.

Source shelves

Source Role
Motion.dev Production-grade animation docs and packages for React, JavaScript, and Vue. Default engine route for ordinary app UI motion before reaching for heavier timeline tooling.
Motion Primitives Editable React/Tailwind motion components built with Motion. Good for common animated primitives before writing custom Motion code.
Magic UI React/Tailwind/Motion animated components and effects for shadcn-style projects. Use for beams, grids, marquees, shimmer, border effects, and section-level motion.
Kokonut UI Animated Tailwind/shadcn/Motion component source for React and Next.js. Use for polished components before writing custom animated variants.
React Bits Ready-made React text animations, UI effects, and backgrounds including Liquid Chrome. Start here for installable/copyable effects, then retokenize and verify motion/accessibility.
Gradient Shimmer Narrow React text-shimmer package for multi-stop gradient highlights on real DOM text. Use for active-status polish, not as a full loading-state system.
Haikei Web tool for generating static SVG assets: blobs, waves, layered backgrounds, and patterns. Use as exported source material.
Unicorn Studio No-code WebGL editor for interactive effects, motion, dither/glyph treatments, video/JSON export, and embeds. Keep as a design proof unless production needs the runtime.
Motion Animation Style Local taste rules for SVG and Motion explorations, including the Cleon Figma-exported isometric cube study.
Easing Graphs Curated easing curve editor/export surface for CSS, Motion, SwiftUI, UIKit, Core Animation, and Raw values.
Creative Web Interaction References Playful web artifacts to mine for interaction vocabulary before asking an agent to design a novel interface.
Claude Fable 5 shader artifacts Prompt-to-shader capability references, especially the Drowned Spires II neo-gothic flooded-city artifact. Use for vocabulary and judging, not as a dependency.
Oriku dither typography studies Japanese/English typography plus blue dithered aquatic imagery. Use as an aesthetic reference, not a reusable component library.
Grim breathing dithered charts Dark product-dashboard data cards where area-chart fills breathe through red/blue/purple halftone texture while labels stay sharp. Use as a chart-treatment reference for admin/ops surfaces, not as a dependency.
Abubaker pixel/dither landscapes Four-image visual exploration with luminous green particle ribbons, dithered pastoral terrain, statue/temple silhouettes, and retro computer objects. Use as an art-direction reference for mythic computing or editorial surfaces, not as a dev-tool source.
invinciDesigns cubed terminals Red p5js-style grid scene where black terminal panels orbit/assemble inside a transparent cube with telemetry labels and corner handles. Use as a living-code visual reference for editorial/hero motion.
Praveen dither + ASCII motion Pale lavender dithered flower forms over a sparse editorial finance/news section. Use as evidence that lo-fi treatments can stay quiet, premium, and text-led.
Mehmet Ozsoy product-illustration motion Monochrome fintech landing page where the hero's technical illustration and partner ticker animate while copy and navigation stay static. Use as evidence that motion should explain workflow/state, not just decorate a static graphic.
FigsFromPlums Holographik poster Black pseudo-technical poster with TXT2IMG, MIDJOURNEY, STABLE DIFFUSION, RUNWAYML, coordinates, diagrams, and brand marks. Use as AI-era technical-brand art direction, not as a tool/source claim.
Soren Blank Linear parallax bar Pale Linear-style bars controlled by a DialKit-like floating panel for bars, x/y step, diagonal offsets, peak height, falloff, and floor. Use as evidence that complex motion should be tuned as parameters, not guessed in code.
ShaderGradient Visual editor for animated 3D gradient backgrounds; the 2026-06-25 saved preset uses a teal/orange/steel sphere with grain and slow motion. Exact params are in the raw note.
Shaders.com Composable WebGPU effects for React/Vue/Svelte/Solid/vanilla. Use for deeper shader stacks and agent-accessible presets.
Shader Lab Basement's tool for creating, stacking, and animating shader treatments. Useful as a study surface even when not adopting the code.
Shader Gallery Browseable shader inspiration gallery for art direction and effect vocabulary.
GSAP Showcase High-quality motion and scrollytelling examples from the GSAP ecosystem; inspiration only unless GSAP is already warranted.
Anime.js Lightweight JavaScript animation engine. Use the local animejs skill before implementation.
Skale / 2D launch-animation references Premium SaaS/startup launch videos. Use as a storyboarding reference when a product needs motion to explain workflow or value, not as a web runtime dependency.
Dither Vector dithering for textured image/gradient treatment. Stored in Dither.
DAB Browser-based dither/bitmap treatment reference. Use alongside Dither when the art direction wants lo-fi texture.
ASCII Magic Image/video to ASCII, pixel art, voxel, mosaic, halftone, glitch, and similar exports. Stored in ASCII Magic.
Heerich SVG voxel 3D engine. Use when a vector/isometric 3D treatment should avoid WebGL. Stored in Heerich.js.
Charcuterie Unicode exploration surface. Useful for glyph-based texture, icons, and loading-state ideas.

Use rules

  • Pick one dominant effect family per viewport. Multiple constant-motion effects compete for attention and cost.
  • Retokenize copied effects: color, grain, blur, camera, speed, contrast, and reduced-motion fallback.
  • Prefer video/image exports for decorative treatments when runtime shaders do not need interactivity.
  • Never let shader or dither treatments reduce text contrast. Verify rendered screenshots in light and dark modes.
  • If the goal is a production component, route through Component Library Sources after choosing the effect direction.

Timeline

Related Pages

Moodboard SitesMotion Library RankingMotion.devWeb3D Library RankingShader Effects LibrariesComponent Library SourcesMotion PrimitivesHaikeiReact BitsMagic UIKokonut UIGradient ShimmerAnimation Vocabulary (Animations.dev)Animations.devEasing GraphsCreative Web Interaction ReferencesDesign and AnimationInterface Micro-PolishDitherUnicorn StudioASCII MagicPaper Design ToolLiquid Logo (Paper Shaders Liquid Metal)Evil ChartsTechnical Illustration SystemDialKitX Bookmarks: Design & UI (Feb–Jun 2026)

36 pages link here

Aesthetic SystemsDesignASCII MagicToolsBklit UIToolsBrain CapsulesMetaCharcuterieToolsCreative Web Interaction ReferencesDesignDesign and AnimationStyleDesign Engineering ResourcesToolsDesign System MapDesignDialKitToolsDitherToolsEasing GraphsToolsFancy ComponentsToolsFrontend FrontierDesignGradient ShimmerToolsHaikeiDesignKokonut UIToolsMagic UIToolsMath Curve LoadersToolsMoodboard SitesToolsMotion Library RankingDesignMotion PrimitivesDesignMotion.devToolsReact BitsToolsShader Effects LibrariesDesignShader LabToolsShaders.comToolsTechnical Illustration SystemDesignTerminal AestheticsDesignUI Library RankingDesignUnicorn StudioToolsWeb3D Library RankingDesignX Bookmark Ingest 2026-06-28ResearchX Bookmarks: 3D & Shaders (Mar–May 2026)ToolsX Bookmarks: Design & UI (Feb–Jun 2026)DesignX Bookmarks: Dev Tools (Mar–Jun 2026)Tools