Artifice

ar•ti•fice är′tə-fĭs ►

n.
Deception or trickery.
n.
Something contrived or made up to achieve an end, especially by deceiving; a stratagem or ruse: synonym: wile.

This is home to some (art) experiments to improve my frontend trickery.

Each experiment is organised into a folder. If the folder has:

• A subfolder with the title "original" - I recreated the original artwork in here (with a smidge of artistic license).
• A subfolder with the title "remix" - this is where I go off and create my own thing.
• If there is neither of these subfolders, it's likely to be my own creation.

To try out the experiments, you can install the dependencies and run a local dev server:

npm install
npm run dev

1. Diamond Wipe
2. Sin City (Microaction Graphic Novel)
3. Orange, you thirsty?
4. Johnny Cash Busted
5. Straight Outta Some Swiss Canton
6. They See Me Rollin
7. Dada
8. Trump channeling Kanye
9. Train Parallax
10. Black to White Disks
11. LSD
12. Shiny book reveal
13. Christmas Decoration
14. Logo tilt
15. NES Controller
16. Star Wars - Join the Alliance Recruitment Poster
17. Star Wars - Circular Wipe Transition
18. Bubble text with image background
19. Framed content
20. Handpuppet blockquote
21. WRDSMTH interactive art playground
22. Kafkaesque 3D animation
23. Scrabble pseudo-typeface
24. First rule
25. Don't let the bastards grind you down (June poster)
26. Consolesque marqueeish text
27. Snippets Ranger loader
28. Christmas patterns
29. Football drop

Diamond Wipe

A diamond-shaped wipe reveal of text.

You can check out the codepen.

See "diamond-wipe" folder for code.

Sin City (Microaction Graphic Novel)

Add short bursts of action (animation) to a graphic novel.

It autoscrolls to show each tab at the top of the page and cycles through to the next.

I discuss this more in my post - Make your own (interactive) graphic novel.

You can check out the codepen.

See "sin-city-microaction-graphic-novel" folder for full info.

Orange, you thirsty?

Whimsical take on a product card for orange juice. On hover, it reveals the product with an animation.

You can check out the codepen.

See "orange-you-thirsty" folder for full info.

Johnny Cash Busted

Animation of Johnny Cash's arrest sheet being filled out.

You can check out the codepen.

See "johnny-cash-busted" folder for full info.

Straight Outta Some Swiss Canton

A poster for a NWA concert.

Inspired by this Swissted poster by Mike Joyce.

See "straight-outta-some-swiss-canton" folder for full info.

Original

Remix

Animated variant.

You can check out the codepen.

They See Me Rollin

Kitsch wordplay of the opening lines of Chamillionaires' song Ridin Dirty.

You can check out the codepen.

See "they-see-me-rollin" folder for full info.

Dada

Recreation of this poster by Paul Rand.

See "dada" folder for full info.

Original

Remix

Check out the codepen.

Trump channeling Kanye

Trump spitting quotes from Kanye. Quotes are fetched from the kanye.rest API.

You can check out the codepen.

See "trump-channeling-kanye" folder for full info.

Train Parallax

Created for an article - How to make an awesome horizontal parallax animation.

You can check out the codepen.

See "train parallax" folder for full info.

Black to White Disks

This is a web rendition of the painting Black to White Disks by Bridget Riley.

See "black-to-white-disks" folder for full info.

Original

The original is recreated faithfully in the 'original' folder.

Remix

You can check out the codepen.

LSD

Web rendition of the spot painting LSD by Damian Hirst.

See "lsd" folder for full info.

Original

Remix

You can check out the codepen.

Shiny book reveal

3D hover effect to open a book and reveal a synopsis of the story. I wanted to try out creating realistic reflections.

You can check out the codepen.

See "shiny-book-reveal" folder for full info.

Christmas Decoration

This an idea for a customisible Christmas decoration. It is like an accordian of cards. There are different designs on each side, you can fold them to create different combinations.

You can check out the codepen.

See "christmas-decoration" folder for full info.

Logo tilt

I wanted to try out a goofy idea. I wanted to animate a website’s logo so that it would fall over when you scroll down, and right itself when you scroll up. In particular, I wanted the logo to be a head or have a cartoonish look.

You can check out the codepen.

See "logo-tilt" folder for full info.

NES Controller

This is a CSS recreation of a NES (Nintendo) game controller. It is an experiment to see the impact shadows can have on the realism of a design. You can toggle the shadows on/off to judge for yourself!

You can check out the codepen.

See "nes-controller" folder for code.

Star Wars - Join the Alliance Recruitment Poster

Star Wars recruitment poster, sort of.

You can check out the codepen.

See "star-wars-join-the-alliance" folder for full info.

Star Wars - Circular Wipe Transition

Circular wipe transition of scenes.

Since the mask CSS property is not fully implemented across browsers, I looked for alternatives that have better support.

I created 2 versions:

1. CSS clip-path version: The clip-path property is the basis of the animation. The transition edges are hard. You can see it in this codepen.
2. SVG mask version: A SVG mask is used. The transition edges are soft. You can see it in this codepen.

I discuss these implementations in the post - An awesome, cross-browser Star Wars circular wipe transition? CSS houdini vs clippath vs mask.

See "star-wars-circular-wipe" folder for code.

Bubble text with image background

I wanted to see if I could create text with a background image and a stroked outline.

To achieve this, the following non-standard properties are required: -webkit-background-clip: text and -webkit-text-stroke.

You can check out the codepen.

See "bubble-text-image-background" folder for code.

Framed content

I wanted to see if you can have content with a picture frame as a border. The border image should enclose the content whatever its dimensions.

I used the border-image family of properties. I use border-image-repeat: repeat; to handle when the width of the content is greater than the border image width. This degrades the image fidelity but in this case, it looks fine.

You can check out the codepen.

See "framed-content" folder for code.

Handpuppet blockquote

Have an image of a handpuppet affect the outline of a quotation. Uses shape-outside property.

You can check out the codepen.

See "handpuppet-blockquote" folder for code.

WRDSMTH interactive art playground

An interactive playground of the signature artwork of street artist WRDSMTH. WRDSMTH is a Los Angeles-based street artist known for his iconic image of a vintage typewriter featuring different sheets of inspirational text.

See "wrdsmth" folder for code.

Attribution

• Icons from Material Design.
• Original audio sourced from Freesound:
  • Typewriter by exterminat

Kafkaesque 3D animation

A 3D CSS animation inspired by a quotation from the late, great author Franz Kafka:

A book must be the axe for the frozen sea in us

demo.mp4

You can check out the codepen.

See "kafkaesque" folder for code.

Scrabble pseudo-typeface

Creates a pseudo-typeface that changes letters of a paragraph text into scrabble tiles.

You can check out the codepen.

See "scrabble-typeface" folder for code.

First rule

Simple animation riffing on the novel Fight Club's first rule.

demo.mp4

You can check out the codepen.

See "first-rule" folder for code.

Don't let the bastards grind you down (June poster)

A poster inspired by the phrase from the book The Handmaid's Tale. I am playing with the typographic style to give the text more character.

Based on

A Halloween themed design with animated bats and a transmuting cat.

Animated images (GIF, WEBP) can be used as a mask to create an animated element. Then, you can apply custom styles to the element to create interesting silhouettes.

demo.mp4

Chrome still requires that you use prefixed mask properties for this to work! Interop 2023 is meant to sort this out soon..

You can check out the codepen.

See "witchin-masks" folder for code.

Consolesque marqueeish text

I wanted to play with the idea of showcasing my name within a console. I went for columns of scrolling text similar to what the HTML element marquee did, but hopefully in a tasteful way!

demo.mp4

You can check out the codepen

See "consolesque-marqueeish-text" folder for code.

Snippets Ranger loader

This is a loading animation for a VS Code extension I wrote called Snippets Ranger.

It is meant to whimsical and eccentric. I wanted make something silly and annoying, and then dial it back enough so it is merely fun!

You can check out the codepen.

See "snippets-ranger-loader" folder for code.

Christmas patterns

Simple geometric christmas patterns, animated for maximuim candy. Playing around with CSS gradients and SVG pattern and symbol elements to create different types of patterns.

Inspired by this design by zzdesign.

You can check out the codepen.

See "christmas-patterns" folder for code.

Football drop

This CSS animation of a football being dropped and bouncing a few times uses an easeOutBounce easing created with linear(). The @keyframes is very, very simple! 🙏

See "football-drop-animation" folder for code.

You can check out the codepen.