lordsean

GSAP Logo Animation 1

Lovely animation done by ToyFight for the GSAP rebrand

A Pen by GSAP on CodePen.

License.

lordsean

- var n = 360

.center
  while n--
    .thing

lordsean

#Clocktober Day 22: Etched

The strokes of this clock are pressed into the surface. The top left zero though is pressed in lightly since it indicates the hour digit we don’t read.

A Pen by Jon Kantner on CodePen.

License.

lordsean

<div id="app">
  <div id="prize">
    <div id="prize-lines" class="prize-filter"></div>
    <div id="prize-shadow" class="prize-filter"></div>
    <h2 id="prize-label">
      <span class="asterisk">*</span>
      <span>CASH PRIZE</span>
      <span class="asterisk">*</span>      
    </h2>
    <h1 id="prize-text"></h1>

lordsean

 <main>
      <div class="info">
        <div>
          ▸ Inspired by the site of
          <a
            target="_blank"
            href="https://www.awwwards.com/inspiration/camping-with-kona-kona-digital-studio"
          >
            Hyundai
          </a>

lordsean

Evervault Hover Effect

A recreation of the insane hover effect from https://bit.ly/EvervaultCustomerPageEffect.

A Pen by Hyperplexed on CodePen.

License.

lordsean

Drive Home (CSS)

Inspired by https://www.youtube.com/watch?v=eKtsY7hYTPg Using CSS instead of GLSL.

Get the wallpaper (Wallpaper Engine): https://steamcommunity.com/sharedfiles/filedetails/?id=3132733849

A Pen by wheatup on CodePen.

License.

lordsean

<canvas id="image-sequence" width="1158" height="770" />

lordsean

- var n = 360

.center
  while n--
    .thing

lordsean

const word = /\w/;

const { body } = document;

async function delay() {
  const amount = Math.round(Math.random() * 60 + 40);
  return new Promise((resolve) => setTimeout(resolve, amount));
}

let pause = false;