Bonatti123

Card Beam Animation

An experimental animation where cards slide through a glowing beam and transform into code. Inspired by the awesome Evervault visuals ✨

A Pen by BL/S® Studio on CodePen.

License.

Bonatti123

Canvas Proximity Mask

A Pen by Ricardo Mendieta on CodePen.

License.

Bonatti123

Canvas Proximity Mask

A Pen by Ricardo Mendieta on CodePen.

License.

Bonatti123

🌊

A Pen by Cubiq's draftier drafts on CodePen.

License.

Bonatti123

<!-- https://developer.chrome.com/blog/masonry-update -->
<main>
  <div class="card-animation-layer">
    <article class="card">
    <img src="https://assets.codepen.io/2585/Roboto.svg" alt="placeholder-hand-drawn-vector" height="500" width="500">
    <p>Sort of short and tiny amount of content here.</p>
    <a href="https://blush.design/collections/i6aPXTYbSUdZEveWhgik/transhumans">Cool art</a>
  </article>
  </div>
  

Bonatti123

🌊

A Pen by Cubiq's draftier drafts on CodePen.

License.

Bonatti123

<!-- https://developer.chrome.com/blog/masonry-update -->
<main>
  <div class="card-animation-layer">
    <article class="card">
    <img src="https://assets.codepen.io/2585/Roboto.svg" alt="placeholder-hand-drawn-vector" height="500" width="500">
    <p>Sort of short and tiny amount of content here.</p>
    <a href="https://blush.design/collections/i6aPXTYbSUdZEveWhgik/transhumans">Cool art</a>
  </article>
  </div>
  

Bonatti123

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

Bonatti123

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Morphing Shapes</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">

<style>
    *, *::before, *::after {

Bonatti123

Boxed Space Anomaly

I've now conjured up the space anomaly from my previous pen in a glass cube to make it a bit more manageable.

Since it fascinates me, I made a few of them:

• https://openprocessing.org/sketch/2662875
• https://www.shadertoy.com/view/tfV3W3

This one is full of oddities. After all, this is an anomaly.