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

The default URL is http://localhost:3000. The default page (index.html) will outline the experiments with links to explore them .

Table of Contents

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

A diamond-shaped wipe reveal of text.

You can check out the codepen.

See "diamond-wipe" folder for code.

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.

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.

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

You can check out the codepen.

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

A poster for a NWA concert.

Inspired by this Swissted poster by Mike Joyce.

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

Animated variant.

You can check out the codepen.

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.

Recreation of this poster by Paul Rand.

See "dada" folder for full info.

Check out the codepen.

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.

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.

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

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

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

You can check out the codepen.

Web rendition of the spot painting LSD by Damian Hirst.

See "lsd" folder for full info.

You can check out the codepen.

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.

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.

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.

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 recruitment poster, sort of.

You can check out the codepen.

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

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.

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.