Design Tests
Interactive prototypes for therapy process visualization. Click items to expand.
vor der therapie
bei der therapie
nach der therapie
zurück in
Die Rückkehr in Ihr gewohntes Leben – ob Alltag, Sport oder Wettkampf – steht im Mittelpunkt der Therapie.
Kostenrückerstattung
Die Teilkostenrückerstattung nach Einreichung der Honorarnote ist abhängig von Versicherung und Verordnung.
Scroll & Parallax Effects
Inspired by capsules.moyra.co – showcasing modern scroll-driven animations, parallax layers, and sticky elements.
Parallax Background
Sticky Section
Item 1
Scroll-triggered fade-in animation.
Item 2
Scroll-triggered fade-in animation.
Item 3
Scroll-triggered fade-in animation.
Item 4
Scroll-triggered fade-in animation.
Item 5
Scroll-triggered fade-in animation.
Item 6
Scroll-triggered fade-in animation.
Horizontal Scroll Gallery
Scroll Progress
Smooth Reveal
First Element
This element animates into view as you scroll, with directional movement.
Second Element
This element animates into view as you scroll, with directional movement.
Third Element
This element animates into view as you scroll, with directional movement.
Horizontal Scroll Timeline
Scroll-triggered horizontal timeline inspired by the therapy process design. Vertical scrolling drives horizontal movement through the timeline phases.
PHYSIO
ALLE KASSEN
VOR
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
VERLETZUNG / OP
ÄRZTLICHE VERORDNUNG
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmodTermin buchen
TERMIN BUCHEN
WÄHREND
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
DEN ALLTAG
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
DEN SPORT
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
DEN WETTKAMPF
Implementation Notes
- Each item is clickable and expands smoothly with Framer Motion animations.
- Uses the existing design system colors (color-border, color-accent, color-accent-highlight).
- Square edges throughout, consistent with brutalist editorial style.
- Accessible keyboard navigation and focus states.
- Only one item can be expanded at a time (single accordion).
- Three-column layout on desktop, stacks on mobile.