Portfolio

A short looping video showcasing the Tears of the Kingdom microsite. It starts with a fullscreen intro animation of the game logo being revealed among smoke and embers. It then scrolls down the homepage, main navigation menu, the amiibo page and finally the Features page.

The Legend of Zelda: Tears of the Kingdom

  • Microsite
  • Next.js
  • GLSL
  • SVG
  • Internalization
  • Accessibility
  • Contentful

I was the lead developer on the microsite for Nintendo's biggest game of the year. Built in Next.js, it combines WebGL shader, SVG and CSS animations.

zelda.nintendo.com/tears-of-the-kingdom
A short looping video showing Spell Caster gameplay. There is a small isolated medieval room with a pedestal in the middle. On the pedestal is a floating purple crystal. Demons appear around the crystal and we see the player drawing shapes in the air to cast a variety of spells. Eventually, the play loses and the crystal explodes.

Spell Caster

  • Game
  • Three.js
  • GLSL
  • SVG
  • GSAP
  • Blender

A game where you draw spells in the air to defeat demons. Built with Three.js and GSAP. I wrote custom shaders, flow fields, particle systems and reliable shape recognition functions.

codepen.io/ste-vg/full/zYerxoR
A short looping video showcasing the Splatoon 3 microsite. Starting on the homepage we see the trailer modal open with a fullscreen paint splat transition. We then scroll down the rest of the homepage and news page. Finishing up with the main navigation menu opening.

Splatoon 3

  • Microsite
  • Next.js
  • GLSL
  • Internalization
  • Accessibility
  • GSAP
  • Contentful

I was the lead developer on this challenging microsite build for Nintendo's Splatoon 3 game. It has many overlapping and rotated elements that make a responsive layout tricky. On top of that, there are many animations throughout; some written in WebGL shaders to allow for smooth fullscreen paint splat transitions.

splatoon.nintendo.com
A video showing a dark background with colourful particles emanating from the user's cursor as they move around the screen.

Rainbow-luminescence

  • PIXI.js

A colourful particle system where movement is controlled by a custom-made flow field. Rendered in WebGL (via PIXI.js) for great performance.

codepen.io/ste-vg/full/qBQVGEG
A short looping video of the Kirby and the Forgotten Land microsite. We see the colourful site featuring lots of large images of the game's characters and short gameplay videos.

Kirby and the Forgotten Land

  • Microsite
  • GSAP
  • Internalization
  • Accessibility

I was the lead developer on this fun and colourful microsite for Nintendo's Kirby and the Forgotten Land game. This site is full of playful animations and interactions.

kirbyandtheforgottenland.nintendo.com
A short looping video of a 3D plane that animates as the user scrolls down the page. Halfway down the page transitions to a blueprint design.

Airplanes

  • GSAP
  • ScrollTrigger
  • Three.js

A short, tongue-in-cheek guide to airplanes. I was lucky enough to get early access to GSAP's ScrollTrigger plugin and built this demo to showcase its power combined with Three.js.

codepen.io/ste-vg/full/GRooLza
A short looping video of the Switch Sports microsite. The user clicks right through a carousel of sports categories, occasionally selecting one. When selected it shows a smooth transition to a modal with more details.

Switch Sports

  • Microsite
  • GSAP
  • FLIP Animations
  • Internalization
  • Accessibility

I was the lead developer on Nintendo's Switch Sports Microsite. In this one, I used the FLIP animation technique to seamlessly transition between a carousel on the page to a full-screen modal.

nintendoswitchsports.nintendo.com
A short looping video of a selection of photos being torn in half.

Photo Tear

  • Three.js
  • GLSL

I wrote a custom shader and 2 planes to create this satisfying ripping effect.

codepen.io/ste-vg/full/rNjOgYv

Disney Big Picture

  • Dashboard
  • Design
  • Angular
  • D3
  • SVG
  • Node.js

Big Picture is a data science tool used by many internal departments of Disney. I worked closely with Disney, visiting their Burbank offices regularly, to design and build an app that contained vast amounts of data while remaining simple to understand.

Disney were keen to create a product with a strong focus on UX that would be enjoyable and easy to use on a daily basis. I built and designed the app myself and it went on to win an internal award.

A short video of a 3D burger transitioning into a drum kit.

Beat Burger

  • Live stream
  • Three.js
  • GSAP

I joined Alex Trost on the 'Front-end Horse' live stream to teach three.js. We created a fun little experience where a burger turns into a playable drumkit.

CodePen

codepen.io/ste-vg/full/MWpxKYR

Stream Recording

youtube.com/watch?v=VtmsuVT7BGI
A short video of GSAP's 404 page. The text reads 'Oh No, you look lost. Pop us a message and we'll fix that link'. Balloons float over the message and pop when they reach the top of the page, releasing confetti.

GSAP 404

  • GSAP
  • SVG

I was honored when GSAP approached me to use one of my CodePens as their 404 page. I created the balloons that float up the page and pop at the top.

gsap.com/404
A short video of a plain white living room. Presents, stars and other random Christmas themed items are seen shooting into the room and making a mess.

Christmas Cannon

  • Game
  • Three.js
  • Canon.js

I built this very handy Christmas decorations room planner in Three.js and 3D physics library, Canon.js.

codepen.io/ste-vg/full/BazEQbY
A short video showing a variety of text effects as the page scrolls down. Animations include the word 'Oreo' where each letter turns and drops as if being slid out of a packet, and the word 'smash' where the letters forcefully hit the background leaving a large crack.

Oreo Smash Donuts

  • 3D CSS
  • GSAP
  • ScrollTrigger

I wrote a small library that helps split and layer characters so that they look 3D. One particular advantage to my approach is that individual letters can be rotated independently.

codepen.io/ste-vg/full/mdjOaNa
A short video showing a data analyitics dashboard where the charts seamlessly animate between states.

APS Dashboard

  • Dashboard
  • Angular
  • Proof of Concept
  • D3
  • Node.js

The APS dashboard was a proof-of-concept application that generated an NPS-style score from anonymised online conversations and sentiment analysis. I went to extra lengths to include a lot of animations between states to help the user better understand the flow of data.

A short looping video of a silhouetted horse running. When clicked the animation slows down and the shapes that make up the horse are revealed.

CSS Only Animated Horse

  • CSS Only

Setting yourself some restrictions forces you to be creative with your solutions. Animating something complicated with only CSS is a great example of this.

codepen.io/ste-vg/pen/oKYjKV
A short looping video where each letter of the alphabet bounces up and down one by one. On each bounce, the letter changes to the next and the background changes to a different theme.

Letter Hop

  • 3D CSS
  • GSAP

A fun animation where each letter is duplicated and layered to give the illusion of 3D.

codepen.io/ste-vg/full/GRwmqxq
A short video of myself standing on stage at JAMstack conf. A single slide from my presentation is also shown that reads 'You understand better what's happening under the hood'.

Make More Pointless Things

  • Speaking

I gave a short lightning talk during JAMstack conf in San Fransisco about the benefits of making pointless demos.

youtube.com/watch?v=q1qSxmfMIcI
A video of a mock browser where you can see a cartoon footer with a face below the fold. As the user scrolls down the page the footer's face changes from sadness to excitement. Just as the footer enters in view new content is loaded in above it and the footer falls back down in sadness.

Footer Sorrow

  • GSAP
  • ScrollTrigger
  • FLIP Animation
  • MorphSVG

A playful animation that highlights how a footer must feel on an infinitely scrolling website. This animation employs a number of GSAP plugins including FLIP, ScrollTrigger and MorphSVG.

codepen.io/ste-vg/full/PoQgvBK
A video of the Kirby’s Return to Dream Land Deluxe microsite. As the user scrolls down the page a variety of animations are triggered.

Kirby’s Return to Dream Land Deluxe

  • Microsite
  • Internalization
  • Accessibility

I was the lead developer on this bright and colourful one-page microsite. All the animations on the page are CSS with just a little Javascript to trigger them when in view.

kirbysreturntodreamlanddeluxe.nintendo.com
A video of the Animated Web site. As the page scrolls down a grid of short looping videos of the latest projects are shown.

The Animated Web

  • 11ty
  • Accessibility
  • Node.js

I enjoy keeping up to date with all the latest trends in web development, especially when it comes to animation. So much so that I created this site to share inspirational work from around the web and to write tutorials & resources. It's built with 11ty so is fast to load. Scripts are written in Node JS to automatically generate preview videos, social images, and more, allowing me to update it quickly.

theanimatedweb.com
A video showing the gameplay. Blocks move back and forth over a tower of previously laid blocks. As the user presses the spacebar the block is placed on the tower. Any part of the block that overlaps the edge gets cut off and falls.

Tower Blocks

  • Game
  • Three.js
  • GSAP

I remade the iOS game Stack in Javascript and Three.js.

codepen.io/ste-vg/full/ppLQNW
A video of many cartoon heads moving about the screen aimlessly. Many of the avatars are the same but a few are different. The user selects a few and they are moved to the center of the screen.

Steve Treasure Hunt

  • Angular
  • PIXI.js
  • Node.js

I built a treasure hunt around my avatar to create something a little silly but more fun than the average personal site homepage. When someone finds one of the hidden Steves (hidden elsewhere online), they were given a URL to claim it.

old.ste.vg
A short video showing a simple image gallery. Below are small thumbnail buttons for each image. As the user moves through the gallery each thumbnail animates up to the centre, expands and unwraps to make the image it contained fullscreen while at the same time wrapping the old image back into its thumbnail button.

Circle Swap Gallery

  • React
  • GSAP

An unusual image gallery made in React where each image unwraps from a circle.

codepen.io/ste-vg/full/WNvYWKr
A short looping video of a night and day toggle switch. It starts in the day state where the background of the switch is of clouds floating across a blue sky, while the switch toggle is a circle containing twinkling stars on a night sky. When the user toggles the switch the circle expands and the scenes reverse.

Night & Day Switch

  • SVG
  • GSAP

A similar effect to the gallery above, but an extra complication here is that the elements in the unwrapping circle are also animated. I use GSAP to animate some hidden SVG refs and apply the circle masks to some <use> tags.

codepen.io/ste-vg/full/oNgrYOb
A video of a website with many small beetles crawling all over it. As the user scrolls down and the content of the page moves the beetles scurry about to avoid covering it.

Beetles

  • PIXI.js

I used PIXI.js to animate a whole load of beetles that try to move out of the way of the scrolling content.

codepen.io/ste-vg/full/EoGVaB
A short looping video of a cartoon Bob Ross doing the floss dance.

Bob Ross Doing the Floss

  • CSS Only

It's Bob Ross... doing the floss. A CSS only animation.

codepen.io/ste-vg/pen/jXogqd
A short looping video of a bat flapping its wings and hovering in place. When the user clicks the bat drops to the ground and while doing so turns into a vampire.

Vampire Bat

  • SVG
  • GSAP

A short SVG animation using GSAP.

codepen.io/ste-vg/full/GMqzXO
A short looping video of a flame.

Fire

  • PIXI.js

The flame is achieved by animating a bunch of randomly sized coloured circles from bottom to top. Then, on the edges, animating similarly sized black circles to cut the jagged edges. A variety of blend modes complete the effect and allow the edges to be transparent.

codepen.io/ste-vg/full/MReVYj
A short video of a fake weather application where each weather state is subtly animated. The top has a small menu with a variety of weather options.

Animated Weather Cards

  • SVG

I wanted to play with the idea of animations breaking out of their container. Each weather state animates smoothly between the other and breaks out of the card in some way.

codepen.io/ste-vg/full/GqaZbo
A short video of a text input. As the user types the letters fall into view as 3d cardboard boxes.

Physics Input

  • Three.js
  • Canon.js

A silly text input where the characters are delivered by Amazon. It's definitely not best practice or accessible, but it is strangely fun to use!

codepen.io/ste-vg/full/VEJwzb

Running Pumpkin

  • SVG

I built a little library called POP.SVG that allows you translate one SVG path along another. To highlight what it could do I built this animated running pumpkin.

codepen.io/ste-vg/full/zmqvNy
A short looping video showing six cartoon snakes that animate into view, as they stop their bodies form the shape of the word 'Snakes'. After a few seconds, the snakes slither off screen.

Snakes

  • SVG

A similar process to the pumpkin above, but this time the animations are paused halfway along their paths to reveal the word.

codepen.io/ste-vg/full/jemxeV