Zum Inhalt springen

VELINSTYLE MOTION

Motion, die du sehen kannst.

Eine interaktive Übersicht der Motion-Funktionen von VelinStyle. Jede Sektion demonstriert eine eigene Bewegung.

LOCAL CSS WAAPI CANVAS

01 · Entrance

Fade VelinStyle

Sanftes Ein- und Ausblenden von Elementen.

Fade Panel

02 · Entrance

Slide VelinStyle

Elemente bewegen sich kontrolliert aus unterschiedlichen Richtungen.

Slide Panel

03 · Focus

Zoom VelinStyle

Skalierung für Fokus, Intro und visuelle Hervorhebung.

Zoom

04 · Camera

Pan Preview

Langsame horizontale oder vertikale Kamerabewegungen (CSS-Custom, nicht Page-Preset).

05 · Transform

Rotate VelinStyle

Rotation für Objekte und Übergänge — Composer rotate plus WAAPI.

90°

06 · Depth

Parallax VelinStyle

Mehrere Ebenen bewegen sich mit unterschiedlichen Geschwindigkeiten.

Background
Middle
Foreground

07 · Lists

Stagger VelinStyle

Mehrere Elemente starten zeitlich versetzt.

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06

08 · Mask

Reveal VelinStyle

Inhalte werden durch eine kontrollierte Maske sichtbar.

Revealed Surface

09 · Atmosphere

Particles Preview

Leichte Canvas-Partikel — max. 40, pausiert offscreen.

10 · Shape

Morph Preview

Formen und UI-Zustände verändern sich kontrolliert (keine Morph-Engine).

11 · Depth

Blur VelinStyle

Blur- und Focus-Transitions für Tiefenwirkung.

Sharp Foreground

12 · Physics

Spring Preview

Overshoot mit velin-ease="spring"-Token — kein Physik-Simulator.

Spring Target

13 · Composer

Sequence VelinStyle

Mehrere Animationen als zeitliche Abfolge via Motion.sequence.

Sequence Target
  1. 01 Fade
  2. 02 Slide
  3. 03 Scale
  4. 04 Rotate
  5. 05 Reveal

14 · States

Transitions VelinStyle

Übergänge A→B mit runViewTransition (Fallback ohne VT-API).

State A

15 · Hero

Intro VelinStyle

Einstieg mit Timeline hero-intro und heroReveal-Feeling.

Background
Content
Navigation
CTA

16 · Exit

Outro VelinStyle

Kontrolliertes Verlassen — Preset fadeOut.

Outro Surface

17 · Micro

Hover VelinStyle

Kleine Bewegungen für Interaktionen — mit der Maus über die Flächen fahren.

  • Lift

  • Scale

  • Glow

  • Shift

  • Underline

  • Border

Hover-Effekte bleiben dezent — Fokus auf Klarheit, nicht auf Neon.

18 · Scroll

Scroll Motion VelinStyle

An echte Scrollposition gekoppelt — kein Fake-Timer.

Scroll-bound

19 · Scene

Composition VelinStyle

Fade + Slide + Scale + Stagger zu einer vollständigen Szene.

Fade
Slide
Scale
Stagger
Parallax Tone

20 · Library

Presets

Links: Clip-inspirierte Previews. Rechts: echte Motion-Blueprints aus der Page Registry (landing, docs, …).

Preview Clip-inspired

Atelier

VelinStyle Page Registry · Blueprints (—)

Blueprint wird geladen…

21 · Time

Timeline VelinStyle

Zeitlicher Aufbau mit velin-timeline und sichtbarem Playhead.

Title
Subtitle
Buttons
Image

Start · Duration · Delay · Easing — Registry timeline hero-intro

22 · Studio-lite

Control the Motion VelinStyle

Jeder Regler verändert die echte Animation — keine Fake-Controls.

Live Target

23 · A11y

Respect Motion Preferences VelinStyle

Policy-Toggle zwischen safe und reduced.

Demo Surface

Policy: safe · volle Motion

24 · Snippets

From Motion to Code VelinStyle

Kompakte Ausschnitte passend zu den Live-Demos.


      

    


    
    

      

        
System

        
One Motion System.

        
Von kleinen UI-Transitions bis zu vollständigen Sequenzen. VelinStyle Motion verbindet kontrollierte Bewegung, Interaktion und Performance.

      

      

        24 Motion Capabilities
        Local Engine
        CSS
        WAAPI
        Canvas
        Presets
        Sequences
        Transitions
        Reduced Motion
      

      

        Explore VelinStyle
        View Documentation
      

      
Relative Docs-Links funktionieren im Site-Mirror unter velinstyle-site/.