<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>[threejs/webgl] ❍ Yet another Metaballs Hero Section with ThreeJS</title>
<link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<section class="section hero-section">
<div id="container"></div>
<div id="stats"></div>
<div id="ui-container"></div>
<div class="header-area">
<div class="logo-container" id="theme-toggle">
<div class="logo-circles">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
</div>
</div>
<div class="center-logo">
<h1 id="logo-text">Nexus.</h1>
</div>
</div>
<div class="hero">
<h1>Where matter becomes<br>thought and thought<br>becomes form</h1>
<h2 id="story-text">
our vessel drifts at coordinates (0.00, 0.00)<br>
gravitational field extends 0.10 units into quantum foam<br>
currently merging with 0 other entities
</h2>
</div>
<div class="contact-info">
<p class="contact-heading">+Get in touch</p>
<span class="contact-email">hi@filip.fyi</span>
</div>
<div class="footer-links">
<a href="#" class="footer-link">Fluid Dynamics</a>
<a href="#" class="footer-link">Organic Shapes</a>
<a href="#" class="footer-link">Interactive Forms</a>
<a href="#" class="footer-link">Motion Studies</a>
<a href="#" class="footer-link">Contact</a>
</div>
<div class="coordinates">
<p>Nexus State • Active</p>
<p>where consciousness flows</p>
</div>
</section>
<section class="section fin-section">
<div class="fin-text">{ Fin }</div>
</section>
<script type="module" src="./script.js"></script>
</body>
</html>
