About tctech

Explain to you how all this mistaken denouncing pleasure and praising pain was born and we will give you a complete simply free text account of the system, and expound the actual teachings.

Data Analysis
Product Development
Digital Marketing
Security System

Scene System

Shape Dividers

Alle Formen werden per JS dynamisch generiert. --divider-height und --divider-amplitude steuern Form + Größe.

wave wave-double wave-gradient slant oval animated fill-reference

1 — wave (solid)

Helle Section → dunkle Section

Dunkle Section → helle Section

<!-- hell → dunkel -->
<section class="scene bg-light">
    <div class="scene__divider scene__divider--bottom scene__divider--md"
         data-divider="wave"
         data-divider-fill="var(--dark)"
         style="--divider-amplitude:40;">
    </div>
</section>
<section class="scene bg-dark">

<!-- dunkel → primary -->
<section class="scene bg-dark">
    <div class="scene__divider scene__divider--bottom scene__divider--lg"
         data-divider="wave"
         data-divider-fill="var(--primary)"
         style="--divider-amplitude:60;">
    </div>
</section>
<section class="scene bg-primary">

<!-- Amplituden vergleich: flat / gentle / deep / dramatic -->
style="--divider-amplitude:15;"   ← fast flach
style="--divider-amplitude:40;"   ← sanft (default)
style="--divider-amplitude:80;"   ← tief
style="--divider-amplitude:120;"  ← dramatisch

<!-- oder Preset-Klassen: -->
class="scene__divider--flat"
class="scene__divider--gentle"
class="scene__divider--deep"
class="scene__divider--dramatic"

2 — wave-double (zwei überlagerte Wellen mit opacity)

wave-double — zweite Welle mit opacity 0.4

<section class="scene" data-bg-gradient="primary">
    <div class="scene__divider scene__divider--bottom scene__divider--lg"
         data-divider="wave-double"
         data-divider-fill="var(--dark)"
         style="--divider-amplitude:50;">
    </div>
</section>

<!-- data-divider-fill-2 für zweite Wellenfarbe: -->
data-divider-fill="var(--dark)"
data-divider-fill-2="var(--primary)"

3 — wave-gradient (transparent → fill)

Hintergrundbild — Welle nur als Gradient-Übergang sichtbar

<!-- Welle begrenzt nur das Bild — kein harter Schnitt -->
<section class="scene">
    <div class="scene__bg"><img src="..."></div>
    <div class="scene__divider scene__divider--bottom scene__divider--xl"
         data-divider="wave-gradient"
         data-divider-fill="var(--dark)"
         style="--divider-amplitude:60;">
    </div>
</section>

4 — slant + slant-r (schräg)

slant — links hoch, rechts tief

slant-r — links tief, rechts hoch (gespiegelt)

<!-- slant: links hoch → rechts tief -->
<div class="scene__divider scene__divider--bottom scene__divider--lg"
     data-divider="slant"
     data-divider-fill="var(--primary)">
</div>

<!-- slant-r: gespiegelt -->
<div class="scene__divider scene__divider--bottom scene__divider--lg"
     data-divider="slant-r"
     data-divider-fill="var(--dark)">
</div>

<!-- Höhe steuert Schrägungsgrad: -->
class="scene__divider--sm"   ← flach schräg
class="scene__divider--xl"   ← steil schräg

5 — oval + oval-double

oval — sanfte Ellipse

oval-double — mit versetztem zweiten Rand

<!-- Oval — sanfte Halbellipse -->
<div class="scene__divider scene__divider--bottom scene__divider--xl"
     data-divider="oval"
     data-divider-fill="var(--white)">
</div>

<!-- Oval-Double — mit versetztem Rand -->
<div class="scene__divider scene__divider--bottom scene__divider--xl"
     data-divider="oval-double"
     data-divider-fill="var(--dark)"
     data-divider-fill-2="var(--primary)">  ← Randfarbe
</div>

<!-- Oval oben (flip-y): -->
<div class="scene__divider scene__divider--top scene__divider--xl"
     data-divider="oval"
     data-divider-fill="var(--white)">
</div>

6 — animierte Welle

Animierte Welle

data-divider-animated="true" + data-divider-speed="8"

<!-- Animierte Welle — sanft und subtil -->
<div class="scene__divider scene__divider--bottom scene__divider--lg"
     data-divider="wave"
     data-divider-fill="var(--dark)"
     data-divider-animated="true"
     data-divider-speed="8"        ← langsamer = sanfter
     style="--divider-amplitude:50;">
</div>

<!-- Empfehlung: speed 6-10s für subtilen Effekt -->
<!-- Schneller als 4s wirkt unruhig -->

7 — fill Quick Reference

data-divider-fill="var(--white)"

→ weiße Section

data-divider-fill="var(--black)"

→ schwarze Section

data-divider-fill="var(--dark)"

→ dark Section

data-divider-fill="var(--primary)"

→ primary Section

data-divider-fill="var(--secondary)"

→ secondary Section

data-divider-fill="var(--bg-surface)"

→ Surface (grau)

scene-dividers.php — Scene System v1

← Backgrounds → Panels → CTAs