skills.rest
tommylower
tommylowerCOMMUNITY
Explore all skills by this author →
Website𝕏@tommylowerGitHub

funky-shadow

Renders dithered gradient shadows behind UI elements using canvas and Oklab interpolation.

2|Updated Apr 15, 2026
Search Tags:#react#canvas#gradient#ui effects#bayer matrix#dithered shadow#funky-shadow
One-click install
npx skills add https://github.com/tommylower/cortex --skill funky-shadow-tommylower
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: funky-shadow
Source: https://github.com/tommylower/cortex/tree/main/design/tools/funky-shadow
Command: npx skills add https://github.com/tommylower/cortex --skill funky-shadow-tommylower

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires funky-shadow.

What problem does it solve? Standard CSS box shadows look generic when a design calls for textured, retro, or pixel-style glow effects. This Skill guides the installation and use of the funky-shadow package to render dithered, gradient-colored shadows behind cards, tiles, icons, and hero accents. ## Core Features & Use Cases - React Component API: Wrap elements with the FunkyShadow component, configuring width, height, radius, preset, pixelScale, blur, and opacity. - Canvas API: Use renderShadow directly in non-React web projects to draw the shadow onto a canvas element. - Tuning Guidance: Rules for pixelScale, Bayer dither modes (4x4, 8x8, off), radial vs line shapes, opacity limits, and palette-safe custom colors. - Use Case: A product card on a marketing page needs a tactile retro glow. Wrap it in FunkyShadow with the galaxy preset, pixelScale 3, and offsetY 20, then verify alignment across viewports. ## Quick Start Install funky-shadow with your package manager and wrap a card element in the FunkyShadow React component using the galaxy preset.

Frequently Asked Questions about funky-shadow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a dithered shadow to a React component?▼

Install funky-shadow and wrap your element with the FunkyShadow component, passing width, height, radius, and a preset like galaxy. Keep width, height, and radius synchronized with the child element so the canvas shadow stays aligned.

How to use funky-shadow without React?▼

Use the renderShadow function directly with a canvas element, passing width, height, radius, and an options object with preset, pixelScale, offsetY, blur, and opacity. React is only an optional peer dependency of the package.

What pixelScale and dither settings should I use for pixel shadows?▼

Start with pixelScale 3 and the 4x4 Bayer dither for most UI. Use pixelScale 1 for smooth gradients, 4 or 5 for obvious pixel texture, 8x8 dither for larger surfaces, and dither off for clean bands.

When should I avoid using dithered gradient shadows?▼

Avoid them in dense operational UI, tables, forms, and destructive flows where the shadow competes with task completion. Also keep opacity below 0.8 unless the shadow itself is the visual subject.

Why is my funky-shadow canvas misaligned on responsive layouts?▼

The canvas uses fixed width, height, and radius values that must match the child element. For responsive elements, derive values from a measured wrapper or choose a stable fixed-format treatment, then resize slowly to verify alignment.

Related Skills

Explore More Design & Creative Skills→
tchiphuongtchiphuong

heroui-controls

Create React interactive UI elements with Hero UI v3 components.

Community
Basic
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-typography-responsive

Detect responsive typography and legibility defects across mobile, tablet, and desktop viewports.

Community
Intermediate
hubeiqiaohubeiqiao

joe-speaking-design-language

Reference Joe Speaking design tokens for colors, typography, shadows, and motion.

Community
Intermediate
korwlik23korwlik23

remove-shadow-utilities

Remove box-shadow, text-shadow, and drop-shadow effects from CSS and Tailwind utilities.

Community
Intermediate