{children}
)
}
export default function AiBlobWarpDemo() {
return (
{label}
{description}
AI blob warp
Circular avatar with Paper's{" "}
Warp shader. Size via{" "}
className, tuning via{" "}
warpProps.
Configure AI behavior with custom instructions. Click the button below to manage your active instructions.
Active ({activeInstructions.length}):
{activeInstructions.map((id) => {
const instruction = instructions.find((i) => i.id === id)
return instruction ? (
{instruction.title}
) : null
})}
{/* Tabs */}
{demo.data.length} points
{(
Object.entries(ANALYTICS_DEMO_SETS) as [
AnalyticsDemoKey,
(typeof ANALYTICS_DEMO_SETS)[AnalyticsDemoKey],
][]
).map(([k, v]) => {
const on = tab === k
return (
)
})}
{/* Card */}
{demo.title}
{demo.sub}
Hover points for details
Component API
{[
["data", "chart data points"],
["gradientStops", "line color stops"],
["dotColors", "per-dot overrides"],
["gridLines", "grid line count"],
["pinnedIndices", "pinned tooltips"],
["valueLabel", "unit label"],
].map(([p, d]) => (
{p}
{" — "}
{d}
))}
iPhone 17 Pro Max
Tap the Screen to cycle
through dynamic island sizes
Current: {dynamicIslandSize}
{/* Frame color selector */}
{(["graphite", "gold", "blue"] as const).map((color) => (
Select frame color
Your UI
{/* Roundings Grid */}
{roundings.slice(0, 2).map((rounding, i) => (
{rounding}
))}
{roundings.slice(2, 5).map((rounding, i) => (
{rounding}
))}
{/* animations Grid */}
{animations.map((animations, i) => (
{animations}
))}
{/* Roundings Grid */}
{roundings.slice(0, 2).map((rounding, i) => (
{rounding}
))}
{roundings.slice(2, 5).map((rounding, i) => (
{rounding}
))}
{/* animations Grid */}
{animations.map((animations, i) => (
{animations}
))}
updateConfig("dotColor", e.target.value)
}
className="h-10 px-3 py-2"
/>
updateConfig("glowColor", e.target.value)
}
className="h-10 px-3 py-2"
/>
{/* Controls */}
Texture Controls
Select a texture variant and adjust the opacity
{/* Preview with Content */}
Preview with Content
See how the texture looks with content on top
{selectedVariant !== "none" && (
)}
{/* All Variants Showcase */}
{/* Opacity Variations */}
{/* Use Case Examples */}
)
}
```
BackgroundImageTexture is a React wrapper component for shadcn/ui. Use it to add subtle surface texture to hero sections, cards, or pricing blocks.
## Installation
### CLI
```bash
npx shadcn@latest add @cult-ui/bg-image-texture
```
### Manual
**Copy and paste the following code into your project.**
Full source: https://www.cult-ui.com/r/bg-image-texture.json
**Update the import paths to match your project setup.**
## Usage
```tsx
import { BackgroundImageTexture } from "@/components/ui/bg-image-texture";
```
### Basic Usage
Apply a texture background to any container:
```tsx
{textureVariants.map((variant) => (
))}
Texture Background
This content sits on top of the texture layer. Adjust the opacity slider to see how the texture affects the background. The texture is fully interactive and customizable.
Feature 1
Content with texture background
Feature 2
More content examples
All Texture Variants
{textureVariants
.filter((v) => v !== "none")
.map((variant) => (
{variant.replace(/-/g, " ")}
))}
{variant}
Opacity: 0.5
Opacity Variations
{[0.2, 0.5, 0.8].map((opacityValue) => (
Opacity: {opacityValue}
))}
grid-noise texture
Opacity: {opacityValue}
Use Case Examples
{/* Card with Texture */}
Card with Texture
{/* Hero Section */}
Hero Section
Beautiful Card
Cards look great with subtle texture backgrounds
Hero Title
Perfect for hero sections and banners
Content with texture background
Your content goes here
Content
Content
Content
Content
Content
Content
Content
Content
Content
Card Content
Cards look great with subtle texture backgrounds
Hero Title
Perfect for hero sections and banners
{variants.map((variant) => (
))}
```
### Opacity Variations
Compare different opacity levels:
```tsx
const opacities = [0.2, 0.5, 0.8]
{variant}
{opacities.map((opacity) => (
))}
```
### Dynamic Opacity Control
Use state to control opacity dynamically:
```tsx
import { useState } from "react";
import { BackgroundImageTexture } from "@/components/ui/bg-image-texture";
import { Slider } from "@/components/ui/slider";
function DynamicTextureExample() {
const [opacity, setOpacity] = useState([0.5]);
return (
Opacity: {opacity}
Dynamic Texture
Adjust the slider to change texture opacity
Custom styled content
{title}
{description ? ({description}
) : null}Border beam
Button + traveling glow
className targets the shadcn Button;{" "} borderBeamClassName styles the beam wrapper. Use{" "} colorVariant,{" "} beamSize, and{" "} active to tune the effect.
{COLOR_ROW.map(({ key, label }) => (
{label}
))}
{BEAM_SIZES.map((size) => (
{size}
))}
{respectsReducedMotion ? "Reduced motion is on — beam animation stays off." : "Tip: pause leaves the button fully clickable; the glow stops."}
Border beam card
BorderBeamCard wraps{" "}
Card
{" "}
with the same header / content slots. Effect layers use{" "}
pointer-events: none.
Composable card
Same slots as Card — header, title, description, content.
Body content sits in{" "} CardContent, with padding aligned to the root{" "} size.
Color variants
colorful
mono
ocean
sunset
Border beam input
BorderBeamInput and{" "}
BorderBeamInputGroup{" "}
default to{" "}
beamSize="line"
{" "}
(bottom-travel glow). Use{" "}
pill on the group for a
rounded search bar. Addons match{" "}
InputGroup
{" "}
composition.
Single input & pill group
Line beam (InputGroup)
Same pattern as a compact toolbar search — icon + control inside{" "} BorderBeamInputGroup.
Configurable CanvasFractalGrid
updateConfig("dotColor", e.target.value)
}
className="h-10 px-3 py-2"
/>
updateConfig("glowColor", e.target.value)
}
className="h-10 px-3 py-2"
/>
{config.gradients.map((gradient, index) => (
Gradient {index + 1}
updateGradient(index, {
...gradient,
centerX: value,
})
}
/>
updateGradient(index, {
...gradient,
centerY: value,
})
}
/>
{gradient.stops.map((stop, stopIndex) => (
))}
{
const newStops = [...gradient.stops]
newStops[stopIndex] = {
...stop,
color: e.target.value,
}
updateGradient(index, {
...gradient,
stops: newStops,
})
}}
className="h-10 w-16"
/>
{
const newStops = [...gradient.stops]
newStops[stopIndex] = {
...stop,
position: value,
}
updateGradient(index, {
...gradient,
stops: newStops,
})
}}
className="flex-grow"
/>
))}
Single Selection
With Results
Multiple Selection
Compact
{/* Multi-tab example */}
Package Manager Installation
Single Code Block
API Configuration
{avatars.map(({ name, color }) => (
{Object.entries(colorScheme).map(([key, value]) => (
{
const [h, s, l] = newColor
.match(/\d+(\.\d+)?/g)
?.map(Number) || [0, 0, 0]
setColorScheme({
...colorScheme,
[key]: `${h.toFixed(1)} ${s.toFixed(1)}% ${l.toFixed(
1
)}%`,
})
}}
/>
))}
Color Preview
Experience your color palette in action. This preview showcases your selected colors.
{Object.entries(colorScheme).map(([key, value]) => (
{key}
))}
Click to copy
{children}
{sampleCode}
Sarah Chen
5 min read
{/* Fixed Distorted Glass Header */}
{/* Scrollable Content Area - Content scrolls behind the glass */}
DISTORTED
GLASS
{/* Section 2: Grid of Moving Squares */}
{/* Section 3: Radial Circles */}
{/* Section 4: Lines Pattern */}
{/* Final Info Section */}
)
}
```
DistortedGlass is an SVG filter component for React and shadcn/ui. Use it as a divider between landing page sections or under a sticky header to soften the transition.
## Installation
### CLI
```bash
npx shadcn@latest add @cult-ui/distorted-glass
```
### Manual
**Copy and paste the following code into your project.**
Full source: https://www.cult-ui.com/r/distorted-glass.json
**Update the import paths to match your project setup.**
## Usage
```tsx
import { DistortedGlass } from "@/components/ui/distorted-glass";
```
### Basic Usage
```tsx
{Array.from({ length: 64 }).map((_, i) => {
const row = Math.floor(i / 8)
const col = i % 8
const squareId = `square-${row}-${col}`
return (
{Array.from({ length: 5 }).map((_, i) => {
const size = 200 + i * 80
const circleId = `circle-${size}`
return (
{Array.from({ length: 20 }).map((_, i) => {
const lineTop = i * 10
const lineId = `line-${lineTop}`
return (
About Distorted Glass
The DistortedGlass component uses SVG filters with fractal noise to create a unique glass morphism effect.
Logo
Hero Section
The distorted glass effect creates a beautiful transition between the header and content areas.
Beautiful Background
Content visible through the glass effect
The distorted glass creates a frosted glass effect that provides visual separation while maintaining the connection to the content below.
Section Title
This is a content section with the distorted glass effect below it.
Top Section
Content above the glass effect
Bottom Section
Content below the glass effect
Background Content
Content section with glass transition
DitherImage
CSS-only Bayer dither via{" "}
dither-plugin
. Compound:{" "}
DitherImage
{" "}
wraps a{" "}
DitherImageFrame
{" "}
(the dithered surface) containing a{" "}
DitherImageContent
, with an optional{" "}
DitherImageCaption
{" "}
that stays outside the filter.
rounded-full,
12px cell, dots flip in dark mode
Reveal · DitherImageOverlay
Partial dither:{" "}
DitherImageReveal
{" "}
stacks a masked{" "}
DitherImageOverlay
{" "}
on the dithered frame.{" "}
direction
{" "}
controls the gradient axis;{" "}
from
{" "}
/{" "}
to
{" "}
set mask stops (see component types for diagonals).
{REVEAL_OVERLAY_VARIANTS.map(
({ direction, from, to, label, hint }, i) => {
const img = GHIBLI_STILLS[(7 + i) % GHIBLI_STILLS.length]
return (
{label}
{" "}
· {hint}
{" "}
— {from}%→{to}%
)
}
)}