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
- Diamond Wipe
- Sin City (Microaction Graphic Novel)
- Orange, you thirsty?
- Johnny Cash Busted
- Straight Outta Some Swiss Canton
- They See Me Rollin
- Dada
- Trump channeling Kanye
- Train Parallax
- Black to White Disks
- LSD
- Shiny book reveal
- Christmas Decoration
- Logo tilt
- NES Controller
- Star Wars - Join the Alliance Recruitment Poster
- Star Wars - Circular Wipe Transition
- Bubble text with image background
- Framed content
- Handpuppet blockquote
- WRDSMTH interactive art playground
- Kafkaesque 3D animation
- Scrabble pseudo-typeface
- First rule
- Don't let the bastards grind you down (June poster)
- Consolesque marqueeish text
- Snippets Ranger loader
- Christmas patterns
- Football drop
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:
- CSS
clip-pathversion: Theclip-pathproperty is the basis of the animation. The transition edges are hard. You can see it in this codepen. - SVG
maskversion: A SVGmaskis 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.
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.
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.
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.
- Icons from Material Design.
- Original audio sourced from Freesound:
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.
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.
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.
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.
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.
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.
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 demo.
See "snippets-ranger-loader" folder for code.
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.
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.