Skip to content
Get Started

Design library

Velora Showcase Library

Browse all showcase sections — motion primitives, color systems, components, typography, and tools. Built with packages/css, zero JavaScript, and vl-* motion patterns. The component gallery has searchable browsable primitives.

Components

Component Gallery

Browsable primitives with search and categories

Motion

Zero-JS Motion

CSS-only animations with vl-effect attributes

Motion

Motion Principles

Timing, easing, and sequencing guidelines

Motion

Kinetic Motion

Actuators, depth, and 3D motion patterns

Motion

Interactions & Micro-animations

Hover, press, and feedback motion patterns

Motion

Scroll-Driven Reveal

Timeline and scroll-linked animation demos

Motion

Scale Shift Actuator

Scale, transform, and depth-shift demos

Motion

API & Motion Catalog

Full reference of vl-effect values and motion API

Color

Color System

Perception model, harmony, and application

Color

Design Tokens

Full --vl-* token reference and usage

Color

Color Palette & Perception

Swatches, tonal steps, and palette construction

Color

Tonal Tiers & Elevation

Depth layers and surface elevation theory

Color

Tonal Stacking

Layering surfaces with alpha and blur

Color

Ambient Shadows

Light model, shadow theory, and presets

Color

Token Spotlight — Surface Noir

Editorial Noir token deep-dive

Components

Component Lab

Technical library of UI primitives

Components

Buttons

Variants, states, and interaction patterns

Components

Form Components

Inputs, selects, checkboxes, and validation

Components

Component Wizard

Guided component configuration tool

Typography

Typography

Type scale, families, and display samples

Typography

Typography Specification

Detailed spec: tracking, weight, and rhythm

Typography

Typography Composition Patterns

Kinetic type and editorial layout patterns

Scenes

Hero Reveal Scene

Full-page entrance with coordinated motion

Scenes

Feature Flow Scene

Staggered feature grid with scroll triggers

Scenes

Story Pin Scene

Sticky scroll narrative with pinned panels

Scenes

Scroll Reveal Scene

View-timeline driven reveal sequences

Tools

Contrast Accessibility Tool

WCAG contrast checker for token pairs

Tools

CSS Converter

Convert values to Velora token equivalents

Tools

Architecture

CSS layer structure and framework blueprint

Tools

Accessibility Guidelines

WCAG 2.2 guidance and audit patterns

Tools

System Modules

Overview of all framework sub-systems

Tools

Brand Voice & Editorial Strategy

Writing style, tone, and editorial guidelines

packages/pages

Component Gallery (interactive)

component_gallery.html → search and categories