dschlueter/jamulix-homepage
Watch
1
0
Fork
You've already forked jamulix-homepage
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Feature: Hologramm-Illustrationen zur Timeline

Browse source 
Acht SVG-Szenen im Stil des Hero-Bilds (dunkler Raum, Neon-Deckenlicht,
Projektor mit Lichtkegel, schwebende Glas-Panels), jeweils gegenüber dem
zugehörigen Timeline-Text; auf Mobilgeräten unter dem Text.
Animationen in globals.css, respektieren prefers-reduced-motion.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Dieter Schlüter 2026-10-07 19:45:01 +02:00
commit 054be8db07
1 changed files with 960 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

14
app/globals.css
View file

@ -130,3 +130,17 @@
.dark ::selection {
background: oklch(0.70 0.22 280 / 0.5);
}
/* ===== Timeline-Illustrationen (components/timeline-holo.tsx) ===== */
@keyframes tl-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tl-spin { to { transform: rotate(360deg); } }
@keyframes tl-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes tl-flow { to { stroke-dashoffset: -16; } }
@keyframes tl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes tl-flicker { 0%, 100% { opacity: 1; } 3% { opacity: 0.82; } 5% { opacity: 1; } 51% { opacity: 0.93; } 53% { opacity: 1; } }
.tl-art .tl-blink { animation: tl-blink 1.1s steps(1) infinite; }
.tl-art .tl-spin { transform-box: fill-box; transform-origin: center; animation: tl-spin 8s linear infinite; }
.tl-art .tl-pulse { animation: tl-pulse 2.4s ease-in-out infinite; }
.tl-art .tl-flow { stroke-dasharray: 4 4; animation: tl-flow 1s linear infinite; }
.tl-art .tl-bob { animation: tl-bob 4s ease-in-out infinite; }
.tl-art .tl-flicker { animation: tl-flicker 5s linear infinite; }