Cube Loader
Cube Loader is a loader in the UI HUB loaders collection. A single self-contained 3D cube loader that switches between two visual modes, both living in one component and one stylesheet, with a variant switcher moving between them.
The component is driven by 4 documented props (variant, onVariantChange, showToggle, className), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: CSS 3D transforms (preserve-3d); CSS custom properties; CSS filter blur.
Preview the loader in the browser above, copy the source, and paste it into your project. Loaders components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Cube Loader?
A two-mode 3D cube loader in one component: an aqua cube with an SVG water-caustic top face and a black cube banded with white glitch marks, selected with one control.
Cube Loader at a glance
- Category
- Loaders
- Pricing
- Free to use
- Libraries
- React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 4
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Cube Loader works
A single self-contained 3D cube loader that switches between two visual modes, both living in one component and one stylesheet, with a variant switcher moving between them. Caustic Cube: four 75px walls inside a preserve-3d wrapper, each spaced by a CSS custom property --i (0, 1, 2, 3) through transform rotateY(calc(90deg * var(--i))) translateZ(37.5px) — exactly half the edge length — so the walls close into a solid cube. Its walls carry a vertical aqua gradient from pale cyan through teal to warm yellow, and the flat top face is overlaid with an inline SVG rect displaced by an SVG filter: feTurbulence of type fractalNoise at baseFrequency 0.09 with one octave generates the field and feDisplacementMap shifts the fill through it on the R and G channels at scale 600, producing a rippling water-caustic surface. Monolith Cube: the same four-wall construction in monochrome, with hard white gradient stops at 5.5%, 27.9%, 45.6% and 71.7% reading as torn scanline glitch bands over black, a desaturated plum top face, and a base plate blurred 10px behind four stacked box-shadows alternating #323232 and white for a soft halo. Both modes pitch the form with rotateX(-30deg) and complete one full rotateY(360deg) every 4 seconds on a linear infinite loop. When showToggle is enabled the switcher buttons are 44px tall, expose aria-pressed for the active mode, and show a focus-visible outline.
Technical information for Cube Loader
| Category | Loaders |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | CSS gradients |
| State change | a single static 3D cube with the switcher idle on Caustic Cube to the selected mode swapping the wall gradient and top-face treatment while the switcher's aria-pressed state moves |
| Props | 4 configurable |
| Usage example | Not published yet |
What Cube Loader requires
- CSS 3D transforms (preserve-3d)
- CSS custom properties
- CSS filter blur
- SVG filters (feTurbulence, feDisplacementMap)
Cube Loader questions
What is Cube Loader?
A two-mode 3D cube loader in one component: an aqua cube with an SVG water-caustic top face and a black cube banded with white glitch marks, selected with one control.
How does Cube Loader work?
A single self-contained 3D cube loader that switches between two visual modes, both living in one component and one stylesheet, with a variant switcher moving between them. Caustic Cube: four 75px walls inside a preserve-3d wrapper, each spaced by a CSS custom property --i (0, 1, 2, 3) through transform rotateY(calc(90deg * var(--i))) translateZ(37.5px) — exactly half the edge length — so the walls close into a solid cube. Its walls carry a vertical aqua gradient from pale cyan through teal to warm yellow, and the flat top face is overlaid with an inline SVG rect displaced by an SVG filter: feTurbulence of type fractalNoise at baseFrequency 0.09 with one octave generates the field and feDisplacementMap shifts the fill through it on the R and G channels at scale 600, producing a rippling water-caustic surface. Monolith Cube: the same four-wall construction in monochrome, with hard white gradient stops at 5.5%, 27.9%, 45.6% and 71.7% reading as torn scanline glitch bands over black, a desaturated plum top face, and a base plate blurred 10px behind four stacked box-shadows alternating #323232 and white for a soft halo. Both modes pitch the form with rotateX(-30deg) and complete one full rotateY(360deg) every 4 seconds on a linear infinite loop. When showToggle is enabled the switcher buttons are 44px tall, expose aria-pressed for the active mode, and show a focus-visible outline.
Which category does Cube Loader belong to?
Cube Loader is listed under Loaders in the UI HUB catalog. Loading and preloader animations for route transitions and first paint: progress reveals, logo and wordmark loaders, geometric spinners and percentage counters. Each loader exposes timing and label props so it can represent real progress rather than decorative motion. Remember to respect reduced-motion preferences when wiring these in.
What does the variant prop do in Cube Loader?
Which cube to render: the aqua water-caustic cube or the monochrome glitch cube. It defaults to "caustic".
What does the onVariantChange prop do in Cube Loader?
Called with the newly selected variant whenever the built-in switcher is used. It defaults to undefined.
Is Cube Loader free to use?
Cube Loader is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Cube Loader use?
Cube Loader uses React and is styled with Tailwind CSS.
What does Cube Loader need to run?
Cube Loader needs CSS 3D transforms (preserve-3d), CSS custom properties, CSS filter blur and SVG filters (feTurbulence, feDisplacementMap).