Portfolio — DeinKollektiv Theme

▲ Ausgangslage

Das Theme war ein Standard Dawn-Fork ohne eigene Identität — keine Animationen, keine interaktiven Sections, kein Fotobuch-Workflow. Jede Designänderung erforderte Code-Eingriffe; das Shopify Theme Editor war nahezu nutzlos.

✓ Umsetzung

Custom Animation Engine auf Basis von Motion One, eine vollständig im Theme Editor konfigurierbare Emotional-Section mit Hover-Animationen, und ein Storefront-Fotobuch-Editor mit direkter Integration zum PRX-Backend via Uploadcare.

🎨

dk-emotional-v6 Section

Vollständig im Theme Editor konfigurierbar — Farben, Glassmorphism-Stärke, Border-Radius und Hover-Verhalten als CSS-Variablen pro Section-Instanz.

card-lift gloss-sweep icon-spin image-zoom

✨

Custom Animation Engine

Scroll-Reveal via [data-reveal-animation], Typewriter-Effekt, Split-Word-Slide — 11 Animationstypen, zero Overhead, prefers-reduced-motion-aware.

fade-up clip blur-reveal typewriter

📖

Storefront-Fotobuch-Editor

Custom JS — 12 Cover-Stile, 8 Deckfarben, Live-Mockup-Preview, Batch-Upload zu Uploadcare (8 Fotos parallel), Manifest-Sync mit PRX-CRM-Backend.

12 Stile 8 Farben Draft-Save Manifest

Beispiel aus dem Code

Theme Editor → CSS + Data-Attribute → Motion One

Zwei Systeme, ein Prinzip: Liquid schreibt zur Build-Zeit, CSS und JS lesen zur Laufzeit.

Liquid → CSSdk-emotional-v6.liquid

/* Liquid setzt Design-Tokens per Section */
#shopify-section-{{ section.id }} {
  --dk-primary:   {{ section.settings.color_primary }};
  --dk-accent:    {{ section.settings.color_accent }};
  --dk-glass:     rgba({{ section.settings.color_glass.red }},
    {{ section.settings.color_glass.green }},
    {{ section.settings.color_glass.blue }},
    {{ section.settings.glass_opacity_percent
      | times: 0.01 }});
  --dk-radius-xl: {{ section.settings.radius_xl }}px;
}

/* Gloss-Sweep — nur CSS, kein JS */
.dk-gloss-sweep {
  background: linear-gradient(105deg,
    transparent 30%, rgba(255,255,255,0.3) 50%,
    transparent 70%);
  transform: translateX(-150%);
  transition: transform 1s var(--dk-bezier);
}
.dk-item:hover .dk-gloss-sweep {
  transform: translateX(150%);
}

JS → Motion Oneanimation-engine.js.liquid

// HTML: data-Attribute steuern Animationstyp
// <h2 data-reveal-animation="fade-up"
//      data-reveal-delay="200">

function runSplitWords(element) {
  const words = text.trim().split(/\s+/);
  const spans = words.map(word => {
    span.style.transform = "translateY(0.5em)";
    span.style.opacity   = "0";
    return span;
  });
  return animate(spans, {
    opacity:   [0, 1],
    transform: ["translateY(0.5em)", "translateY(0)"]
  }, {
    delay: stagger(staggerDelay),
    easing: DEFAULT_EASING
  }).finished;
}

// prefers-reduced-motion: alle Animationen
// werden automatisch übersprungen

Warum das zählt: Keine Seite der Engine erfordert Code-Änderungen für neue Animationen — das HTML-Attribut data-reveal-animation="clip" reicht. Theme-Editor-Kunden ändern Farben ohne einen einzigen Liquid-Edit. Zwei Systeme, null Overhead, maximal konfigurierbar.

Ergebnis

Sections im
finalen Theme

Animations-
typen (Engine)

Cover-Stile im
Fotobuch-Editor

Code-Änderungen
pro Sprache / Farbe