Design Overview
The Royal Physics Mandala (RPM) design system represents a convergence of sacred geometry traditions and modern physics-based animation. This documentation covers the technical implementation of our animated mandala engine and design specifications.
Design Philosophy
Every element of the RPM design system is governed by mathematical precision and physics-based authenticity. The mandala engine implements:
- Rotating geometric layers at differential speeds to create hypnotic visual rhythms
- Particle attraction physics responding to cursor position and environmental factors
- Wave interference patterns generated through overlapping oscillation functions
- Islamic geometric motifs including vesica piscis shapes and star polygon patterns
Animation Engine Architecture
The MandalaEngine class is the core component driving all animations. It operates on a requestAnimationFrame loop at approximately 60fps, updating and rendering in discrete cycles.
Layer System
Mandala layers are defined with the following properties:
- radius: Layer size as a fraction of viewport (0.0 - 1.0)
- speed: Angular velocity in radians per frame (positive = clockwise, negative = counter-clockwise)
- petals: Number of radial repetitions (typically 4, 6, 8, 12, or 16)
- color: Fill/stroke color using CSS color values
Physics Reference
The particle attraction system implements a simplified gravitational model:
- Attraction Force: F = G × (m1 × m2) / r² — particles are attracted toward the cursor position
- Friction Coefficient: 0.98 — applied per frame to prevent infinite acceleration
- Wave Oscillation: sin(time × frequency + phase) × amplitude
- Boundary Reflection: Velocity inverted on canvas edge collision
Color System
The design employs a royal color palette:
- Royal Purple: #4a0080 — primary background
- Warm Rose: #e8b4b8 — accent and secondary elements
- Gold: #d4af37 — primary accent, geometric highlights
- Ivory: #fffff0 — text and primary contrast
Web Integration Guide
To integrate the mandala into an existing project:
- Include styles.css and script.js in your HTML
- Add the mandala-bg div and canvas element where desired
- Initialize MandalaEngine on canvas element DOMContentLoaded
- Configure layer parameters, particle counts, and colors as needed
Performance Considerations
The animation engine is optimized for smooth performance, but consider these guidelines:
- Target particle count: 50 for balanced performance/visuals
- Wave point count: 30 for interference patterns
- Layer count: 6 rotating layers maximum
- Use CSS will-change for animated elements
- Implement visibility detection to pause when off-screen
Accessibility
The design supports accessibility through:
- Reduced motion media query support — disable animations for users who prefer
- High contrast text on all backgrounds
- Semantic HTML structure
- Keyboard navigation for all interactive elements
- ARIA labels for decorative canvas elements
License & Usage
The Royal Physics Mandala design system is proprietary. Usage requires explicit licensing from Royal Physics Mandala Studio. For licensing inquiries, please contact us through the contact page.