Hero mit Sternen

Schnellstart

1) Markiere Container mit .sf und binde starfield.js ein:

<div class="sf" style="height:300px; border-radius:12px; overflow:hidden">
  <!-- dein Inhalt -->
</div>

<script src="./starfield.js"></script>
<script>
  // Alle .sf-Container aktivieren
  applyStarfield('.sf');
</script>

2) Direkt per JS mit Optionen:

const el = document.querySelector('#meinContainer');
const fx = new Starfield(el, {
  pointerSource: 'container', // oder 'window'
  linkLines: true,            // Linien zwischen nahen Sternen
  glowSigma: 130,             // Größe des Maus-Glows
  twinkleAmpl: 0.35           // Stärke des Funkelns
});

// steuern
// fx.stop();
// fx.start();
// fx.destroy();

3) Per Data-Attribut steuern (optional):

<div class="sf" data-pointer="window" data-lines="false"></div>