Documentation

Overview

The Velvet Physics Garden documentation provides comprehensive technical guidance for integrating our botanical design system into your projects. Our system combines organic physics simulation with luxurious visual aesthetics.

Core Principles

Our design philosophy centers on three foundational elements: organic harmony, soft body physics, and art nouveau geometry. These principles guide every implementation decision.

Color Palette

The Velvet Physics Garden color system is built on four primary colors with carefully calibrated variations for different contexts.

Installation

Integrating Velvet Physics Garden into your project requires including our core stylesheet and JavaScript components.

Quick Start

<link rel="stylesheet" href="velvet-garden.min.css">
<script src="velvet-garden.min.js"></script>

Initialize the botanical physics engine on page load:

VelvetGarden.init({
    physics: true,
    particles: true,
    fabric: true
});

Design System

Typography

We use two complementary typefaces: Playfair Display for headings, providing elegant serif formality, and Montserrat for body text, offering clean modern readability.

font-family: 'Playfair Display', serif;
font-family: 'Montserrat', sans-serif;

Typography Scale

Animations

The Velvet Physics Garden animation system simulates organic physics phenomena including petal falling, fabric draping, and dew drop surface tension.

Petal Falling

.petal {
    animation: petalFall linear infinite;
    border-radius: 50% 0 50% 50%;
}

Dew Drop Pulse

.dew-drop {
    animation: dewPulse 3s ease-in-out infinite;
    background: radial-gradient(circle at 30% 30%, 
        rgba(255,255,255,0.9), 
        rgba(247,231,206,0.4));
}

Fabric Drape

.fabric-drape {
    animation: drapeMove 8s ease-in-out infinite;
    filter: blur(2px);
}

API Reference

VelvetGarden.init()

Initializes the Velvet Physics Garden system with configuration options.

Components

Navigation

The navigation component features a fixed position with glassmorphism effect and smooth hover transitions.

Cards

Card components support hover states with subtle scaling and border accent animations.

Buttons

Button variants include primary (velvet red), secondary (outlined), and champagne for featured actions.