HTML/CSS/JS- Aurora Particle Hero Banner

<p class="p3"><span class="s2"><b>Use:</b></span> Paste into an LLM to generate a copy-paste HTML/CSS/JS hero section with a modern light/particle effect.</p>
<p class="p4"><b>Prompt:</b><b></b></p>
<p class="p3">You are a senior front-end developer and creative technologist.</p>
<p class="p3">Build a responsive hero banner called “Aurora Particle Hero” that I can drop at the top of any landing page.</p>
<p class="p3">Requirements:</p>

<ol start="1">
<li>
<p class="p1">Structure</p>
</li>
</ol>
 
<ul>
<li>
<p class="p1">Single-file output: one <span class="s1">index.html</span> with <span class="s1"><style></span> and <span class="s1"><script></span> inline.</p>
</li>
<li>
<p class="p1">Full-width hero, height ~80vh, centered content.</p>
</li>
<li>
<p class="p1">Main title, subtitle, and one primary CTA button.</p>
</li>
</ul>
 
<ol start="2">
<li>
<p class="p1">Visual Style</p>
</li>
</ol>
 
<ul>
<li>
<p class="p1">Dark, modern background.</p>
</li>
<li>
<p class="p1">A subtle “light ribbon / particle” effect behind the text:</p>

<ul>
<li>
<p class="p1">Either HTML5 <span class="s1"><canvas></span> or performant DOM/CSS animations.</p>
</li>
<li>
<p class="p1">Particles or light streaks that gently move, swirl, or orbit.</p>
</li>
<li>
<p class="p1">No heavy libraries; vanilla JS and CSS only.</p>
</li>
</ul>
 </li>
<li>
<p class="p1">Colors: neutral base (dark gray/blue) with one accent theme I can easily tweak via CSS variables (e.g. <span class="s1">--accent</span>).</p>
</li>
</ul>
 
<ol start="3">
<li>
<p class="p1">UX & Behavior</p>
</li>
</ol>
 
<ul>
<li>
<p class="p1">Text must remain readable at all times (good contrast, no visual noise over text).</p>
</li>
<li>
<p class="p1">On desktop: slight parallax or movement on mouse move.</p>
</li>
<li>
<p class="p1">On mobile: simplify the motion (no jank) but keep a subtle animated feel.</p>
</li>
<li>
<p class="p1">Button has a clean hover state (scale or glow).</p>
</li>
</ul>
 
<ol start="4">
<li>
<p class="p1">Code Quality</p>
</li>
</ol>
 
<ul>
<li>
<p class="p1">Use CSS variables for colors and sizing.</p>
</li>
<li>
<p class="p1">Organize JS into small functions: setup, resize, render loop, etc.</p>
</li>
<li>
<p class="p1">Add short comments describing key sections.</p>
</li>
</ul>
 
<p class="p3">Deliverable:</p>
<p class="p3">Return a complete, copy-pasteable <span class="s3">index.html</span> with:</p>

<ul>
<li>
<p class="p1">Semantic markup</p>
</li>
<li>
<p class="p1">Inline CSS</p>
</li>
<li>
<p class="p1">Inline JS</p>
<p class="p1">so I can drop it into a blank file and see the banner immediately.</p>
</li>
</ul>