Mark Shufflebottom

Mark Shufflebottom

Mark is a Professor of Interaction Design at Sheridan College of Advanced Learning near Toronto, Canada. Highlights from Mark's extensive industry practice include a top four (worldwide) downloaded game for the UK launch of the iPhone in December 2007. Mark created the title sequence for the BBC’s coverage of the African Cup of Nations. He has also exhibited an interactive art installation 'Tracier' at the Kube Gallery and has created numerous websites, apps, games and motion graphics work.

Articles by: Mark Shufflebottom

Build prototypes with Adobe XD

Build prototypes with Adobe XD

By Mark Shufflebottom last updated

Web Design Create auto-animated apps complete with voice control.

Build a voice controlled UI

Build a voice controlled UI

By Mark Shufflebottom published

Web Design Convert speech to text for easy input into forms.

How to design with CSS shapes: An introduction

By Mark Shufflebottom last updated

CSS Go beyond the rectangle and create cool effects with CSS shapes.

Add SVG filters with CSS

Add SVG filters with CSS

By Mark Shufflebottom published

Web Design A guide to adding special effects to text and images on your site using CSS and SVG filters.

Liquid effect Creative Bloq logo

How to create liquid effects with WebGL

By Mark Shufflebottom last updated

Web Design Use three.js to make a low-polygon background header.

How to create glitch text and image effects in CSS

By Mark Shufflebottom last updated

CSS Create a distressed glitch text effect using CSS keyframes.

Get started with variable fonts in CSS

By Mark Shufflebottom last updated

Web Design Learn how to load one font and manipulate it through CSS.

How to build an AR app

By Mark Shufflebottom last updated

AR A step-by-step guide to creating a multi-marker augmented reality application using AR.js.

AR build your own app

5 top AR tools to try today

By Mark Shufflebottom last updated

AR We explore the best tools for dabbling in augmented reality on the web.

A screenshot from Patrick Heng's website including moving typography

Create a wobbly text effect with JavaScript

By Mark Shufflebottom published

JavaScript Learn how to add impressive multi-layered text effects.

Create ripple effects

Create ripple effects with PixiJS

By Mark Shufflebottom last updated

JavaScript How to add special effects to pages and transitions with JavaScript.

Add a glitch effect to your website

By Mark Shufflebottom last updated

Web Design Give your site visual punch with an easy animated glitch effect.

How to melt a 3D object with three.js

By Mark Shufflebottom last updated

3D Create an eye-catching effect to make objects melt.

8 3D web projects to inspire you

By Mark Shufflebottom last updated

Web Design A must-see collection of 3D demos that are guaranteed to impress.

Create interactive 3D visuals with three.js

By Mark Shufflebottom last updated

Web Design Create an interactive input slider for a 3D WebGL visualisation.

How to code an augmented reality marker

By Mark Shufflebottom last updated

Web Design Explore augmented reality in the browser.