Ankit Mohapatra Ankit-py
🎯
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="blob"></div> | |
| <div id="blur"></div> | |
| <h1 data-value="LOOK, A BLOB">LOOK, A BLOB</h1> | |
| <div id="links"> | |
| <div class="meta-link"> | |
| <span class="label">Glow Effect</span> | |
| <span class="dot">·</span> | |
| <a class="source" href="https://www.poppr.be" target="_blank"> | |
| <i class="fa-solid fa-link"></i> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| Original pen: https://codepen.io/keithclark/pen/ZjrwpW/ | |
| --> | |
| <h1 class="text-light">CSS Bokeh (color)</h1> | |
| <p class="text-light">Originally by Keith Clark</p> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div role="button"> | |
| <span class="glow"></span> | |
| <div> | |
| <span>cool</span>Glowing shadows | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="content"> | |
| <h1 class="title">the beautiful aurora | |
| <div class="aurora"> | |
| <div class="aurora__item"></div> | |
| <div class="aurora__item"></div> | |
| <div class="aurora__item"></div> | |
| <div class="aurora__item"></div> | |
| </div> | |
| </h1> | |
| <p class="subtitle">Made with love and only the CSS.</p> |
Ankit-py
/ index.html
Last active
April 26, 2023 17:12
Generative UI - Orb Animation [pixi.js] + Frosty Elements ❄️
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Canvas --> | |
| <canvas class="orb-canvas"></canvas> | |
| <!-- Overlay --> | |
| <div class="overlay"> | |
| <!-- Overlay inner wrapper --> | |
| <div class="overlay__inner"> | |
| <!-- Title --> | |
| <h1 class="overlay__title"> | |
| Hey, would you like to learn how to create a | |
| <span class="text-gradient">generative</span> UI just like this? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <nav class="navbar"> | |
| <label class="navbar-toggle" id="js-navbar-toggle" for="chkToggle"> |