Prism Pyramid
Prism Pyramid is a loader in the UI HUB loaders collection. A pure-CSS 3D pyramid spinner with no canvas and no WebGL. Four identical 70px square elements are clipped into triangles with clip-path polygon(50% 0%, 0% 100%, 100% 100%), absolutely centred inside a square stage whose width is min(300px, 100%) and which holds a 1:1 aspect ratio, and each face is filled with its own…
The component is driven by 1 documented prop (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); clip-path; conic-gradient.
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 Prism Pyramid?
A four-faced 3D pyramid spinner where each triangular face carries its own conic gradient, turning once on its vertical axis every four seconds over a blurred violet base.
Prism Pyramid at a glance
- Category
- Loaders
- Pricing
- Free to use
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 1
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Prism Pyramid works
A pure-CSS 3D pyramid spinner with no canvas and no WebGL. Four identical 70px square elements are clipped into triangles with clip-path polygon(50% 0%, 0% 100%, 100% 100%), absolutely centred inside a square stage whose width is min(300px, 100%) and which holds a 1:1 aspect ratio, and each face is filled with its own conic gradient so no two walls read the same. The two rear walls are tilted with rotateZ(-30deg)/rotateZ(30deg) followed by rotateY(90deg) and the two front walls with rotateX(30deg)/rotateX(-30deg); every wall shares transform-origin center top so the faces meet at the apex. A 60px violet plate (#8B5AD5) is laid flat beneath the form with rotateX(90deg) translateZ(-40px) and blurred 12px so it reads as a soft cast shadow. The outer stage is pitched back with rotateX(-20deg) and the inner wrapper completes one full rotateY(360deg) every 4 seconds on a linear infinite loop.
Technical information for Prism Pyramid
| Category | Loaders |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | CSS gradients |
| State change | a static four-faced pyramid seen from its pitched apex to the same form turned a full revolution on its vertical axis, each conic gradient face catching the light differently as it passes |
| Props | 1 configurable |
| Usage example | Not published yet |
What Prism Pyramid requires
- CSS 3D transforms (preserve-3d)
- clip-path
- conic-gradient
- CSS filter blur
Prism Pyramid questions
What is Prism Pyramid?
A four-faced 3D pyramid spinner where each triangular face carries its own conic gradient, turning once on its vertical axis every four seconds over a blurred violet base.
How does Prism Pyramid work?
A pure-CSS 3D pyramid spinner with no canvas and no WebGL. Four identical 70px square elements are clipped into triangles with clip-path polygon(50% 0%, 0% 100%, 100% 100%), absolutely centred inside a square stage whose width is min(300px, 100%) and which holds a 1:1 aspect ratio, and each face is filled with its own conic gradient so no two walls read the same. The two rear walls are tilted with rotateZ(-30deg)/rotateZ(30deg) followed by rotateY(90deg) and the two front walls with rotateX(30deg)/rotateX(-30deg); every wall shares transform-origin center top so the faces meet at the apex. A 60px violet plate (#8B5AD5) is laid flat beneath the form with rotateX(90deg) translateZ(-40px) and blurred 12px so it reads as a soft cast shadow. The outer stage is pitched back with rotateX(-20deg) and the inner wrapper completes one full rotateY(360deg) every 4 seconds on a linear infinite loop.
Which category does Prism Pyramid belong to?
Prism Pyramid 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 className prop do in Prism Pyramid?
Optional class applied to the root container. It defaults to ''.
Is Prism Pyramid free to use?
Prism Pyramid 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 Prism Pyramid use?
Prism Pyramid uses React and is styled with Tailwind CSS.
What does Prism Pyramid need to run?
Prism Pyramid needs CSS 3D transforms (preserve-3d), clip-path, conic-gradient and CSS filter blur.