Core Components
Number Effects
Interactive Elements
Advanced Effects
Radix UI Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Base UI Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Text Shimmer Wave#
Shimmer wave effect on text. Easily adjust the wave effect, spread, duration, and more.
Examples#
Text Shimmer Wave Basic#
Generating code...
Text Shimmer Wave Color#
You can use the [--base-color] and [--base-gradient-color] CSS variables to customize the color of the shimmer effect.
Creating the perfect dish...
Installation#
npx shadcn@latest add "https://components.dylanwlim.com/c/text-shimmer-wave.json"
Component API#
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | The text content. | |
| as | string | 'p' | The HTML element to render. |
| className | string | The class name to apply to the component. | |
| duration | number | 1 | The duration of the wave effect. |
| zDistance | number | 10 | The distance of the wave effect. |
| xDistance | number | 2 | The distance of the wave effect. |
| yDistance | number | -2 | The distance of the wave effect. |
| spread | number | 1 | The spread of the wave effect. |
| scaleDistance | number | 1.1 | The scale distance of the wave effect. |
| rotateYDistance | number | 10 | The rotateY distance of the wave effect. |
| transition | Transition | The transition of the wave effect. |
Build with DWL Components
Use the copied registry, charts, blocks, and create tools in one place.
Start from the DWL Components create flow and customize from there.
Open DWL Components Create