Kanso UI LogoKanso UI

Cards

Minimalist and interactive cards featuring 3D tilt, spotlight, and border glow effects.


Ray Card

A premium, draft-grid style card featuring an animated border-tracer dot and a soft, glowing diagonal light ray.

Glow / Tracer Color
Card Variant
Surface Finish
Tracer speed6s
750k
Total Views

Noise Card

A premium card component featuring customizable background themes, optimized animated noise overlays, and interactive hover spotlight effects.

Telemetry Node

Quantum Wavefront

A premium React container with hardware-accelerated static/animated noise grain layers and hover interactions.

GRAIN: 1pxOPACITY: 6.0%ACTIVE
Card Parameters (Props)
Noise Opacity0.06
Grain Size1px
Spotlight Size300px
Theme Gallery Showcase
Preset: kanso

Kanso Minimal

Ultra-minimalist dark slate/zinc finish.

Preset: indigo

Deep Indigo

Sophisticated deep navy and purple glow.

Preset: sunset

Sunset Amber

Warm amber and rich burgundy glow.

Preset: light

Pure Light

Crisp paper-white with micro shadow and dark grain.

Preset: glass

Frosted Glass

Semi-transparent blur overlay.

Preset: none (Custom)

Custom Emerald

Leverages custom class names and backgrounds.

Feature Grid Card

A sleek hover card revealing an illuminated grid background with animated tiles and glowing grid lines.

Select Hover Theme Color
Products
A beautiful card component that uses shadcn/ui Card primitives under the hood with a premium hover grid.
Categories
Customize the colors to match your brand. Fully accessible and responsive with dark mode support.

Shimmer Border

A container with a subtle animated shimmer effect running along its border.

Perimeter Sweep

Active Light Sweep

GPU-accelerated conic masking sweeps a flowing fiber-optic light beam around the card boundaries.

Width: 2pxSpeed: 3.5sSpread: 20%
Laser Theme Presets
Real-time Config Kit (Props)
Border Width2px
Shimmer Speed3.5s
Shimmer Spread20%
Border Radius16px

Border Glow

A premium card container featuring a dynamic, hover-sensitive conic mesh gradient border and multi-layered glow shadows tracking the mouse pointer.

Active Sweep

Kanso Border Glow

A premium, high-performance card using custom mesh gradient masks. Move your cursor to see the border and glow light up around the coordinates.

Glow: HSL(280 80 70)Mesh: #c084fc, #f472b6, #38bdf8
Border & Glow Themes
Real-time Config Kit (Props)
Glow Intensity1
Edge Sensitivity30
Border Radius28px
Glow Radius40px
Conic Spread Angle25°

Spotlight Card

A layout container with a subtle ambient spotlight that follows the cursor on hover.

Pure Simplicity

Minimalist aesthetics inspired by Japanese design. Clean, light-weight, and developer-friendly.

🔮

Indigo Accent

Customizable spotlight gradients. Override default options to match your product colors.

🚀

Zero Re-renders

Tracks cursor position via direct CSS variable mutations, bypassing component updates.

3D Card

An interactive 3D perspective layout system that tilts toward the cursor and elevates layered children elements along the Z-axis.

Limited Concept
Zen Artisan Keycaps
Frosted obsidian design featuring spring mechanical actions.
Zen Artisan Card visual
ProfileCherry MX
MaterialObsidian PBT
Weight145g Set
$189.00
Real-time Config Kit (Props)
Image Lift (Z)80px
Specs Lift (Z)45px
Button Lift (Z)60px
Title Lift (Z)50px
Desc Lift (Z)30px
Tilt Sensitivity25
Sheen Opacity0.4
Glare Blur16px
Card Border Radius24px

Interactive Card

An all-in-one premium card component combining 3D perspective tilt, cursor spotlight, and edge conic mesh gradient border glows.

Supreme Effect
All-in-One
Zen Interaction
Moves in 3D perspective, tracks cursor coordinates via spotlight, and glows along the conic mesh gradient edges.
Interactive Preview
Real-time Config Kit (Props)
Glow Intensity1
Spotlight Radius300px
Border Radius24px
Glow Radius40px

Liquid Metal Card

A premium minimalist card featuring a real-time, interactive WebGL liquid metal shader overlay.

Kanso UI

Minimal Shader Card / Default Mode

Move your cursor and interact with the real-time liquid metal physics. Drag or hover to warp the liquid surface mask dynamically.

Next.jsNext.jsv16Base UIBase UIv1.5
Shader Theme Presets
Color Tint:
Shader Texture Image
Custom URL:
Fine-tune Shader Sliders (Props)
Repetition6
Softness0.8
Distortion0.4
Speed1
Scale0.6

Glow Card

A premium, modern card container with a highly-fidelity bottom-up radial gradient glow, corner crop marks, and smooth hover state transitions.

Real time location tracking

Advanced tracking system,
instantly locate all your assets.

Payments

Track your transactions

TransactionCustom
Status
Date
Amount
Success
May 15
$2,450.00
Failed
May 14
$950.00
Processing
orders@acme.com
$3,250.00

Command Palette

Search for a command to run...