PRZEM.
← Home

Lab

Hero-Animationen (Referenz)

Zwei Varianten für spätere Hero-Sections: Matrix-Stream (Design-Tokens) und Terminal-Montage (React-Snippets). Fläche 2:1 wie eine typische Media-Karte – importierbar aus @/app/components/hero-experiments.

Idee 2

CSS-Variable-Matrix mit Glitch

--color-primary: #d8336f;--radius-md: 0.75rem;--spacing: 1.5rem;font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;--color-primary: #d8336f;--radius-md: 0.75rem;--spacing: 1.5rem;font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;
--radius-md: 0.75rem;--spacing: 1.5rem;font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;--color-primary: #d8336f;--radius-md: 0.75rem;--spacing: 1.5rem;font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;--color-primary: #d8336f;
--spacing: 1.5rem;font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;--color-primary: #d8336f;--radius-md: 0.75rem;--spacing: 1.5rem;font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;--color-primary: #d8336f;--radius-md: 0.75rem;
font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;--color-primary: #d8336f;--radius-md: 0.75rem;--spacing: 1.5rem;font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;--color-primary: #d8336f;--radius-md: 0.75rem;--spacing: 1.5rem;
--color-primary: #d8336f;--radius-md: 0.75rem;--spacing: 1.5rem;font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;--color-primary: #d8336f;--radius-md: 0.75rem;--spacing: 1.5rem;font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;
--radius-md: 0.75rem;--spacing: 1.5rem;font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;--color-primary: #d8336f;--radius-md: 0.75rem;--spacing: 1.5rem;font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;--color-primary: #d8336f;
--spacing: 1.5rem;font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;--color-primary: #d8336f;--radius-md: 0.75rem;--spacing: 1.5rem;font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;--color-primary: #d8336f;--radius-md: 0.75rem;
font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;--color-primary: #d8336f;--radius-md: 0.75rem;--spacing: 1.5rem;font-family: 'IBM Plex Mono', monospace;--surface: #050505;color: rgba(255,255,255,0.92);--accent: #d8336f;border: 1px solid rgba(255,255,255,0.08);--section-px: clamp(1.5rem, 4vw, 6rem);mix-blend-mode: screen;--blur: 12px;--color-primary: #d8336f;--radius-md: 0.75rem;--spacing: 1.5rem;

Idee 3

Terminal – Snippets docken an, dann „compiled“

team-card.tsx — assembler
function TeamCard() {
  return (
    <article className="card">
      
    </article>
  );
}

assembling…