{"id":20125904,"url":"https://github.com/robole/artifice","last_synced_at":"2025-05-06T17:34:54.509Z","repository":{"id":48133330,"uuid":"315036199","full_name":"robole/artifice","owner":"robole","description":"Experiments \u0026 exercises to improve web dev trickery.","archived":false,"fork":false,"pushed_at":"2024-11-13T01:30:58.000Z","size":79910,"stargazers_count":10,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-13T02:26:58.810Z","etag":null,"topics":["art","css","csstricks","javascript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robole.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-22T12:49:07.000Z","updated_at":"2024-11-13T01:31:02.000Z","dependencies_parsed_at":"2024-11-13T02:35:11.904Z","dependency_job_id":null,"html_url":"https://github.com/robole/artifice","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robole%2Fartifice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robole%2Fartifice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robole%2Fartifice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robole%2Fartifice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robole","download_url":"https://codeload.github.com/robole/artifice/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224517379,"owners_count":17324407,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["art","css","csstricks","javascript"],"created_at":"2024-11-13T20:11:41.671Z","updated_at":"2024-11-13T20:11:42.459Z","avatar_url":"https://github.com/robole.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Artifice\n\n\u003e **ar•ti•fice** *är′tə-fĭs* ►\n\u003e\n\u003en.  \n\u003eDeception or trickery.  \n\u003en.  \n\u003eSomething contrived or made up to achieve an end, especially by deceiving; a stratagem or ruse: synonym: wile.\n\nThis is home to some (art) experiments to improve my frontend trickery.\n\nEach experiment is organised into a folder. If the folder has:\n- A subfolder with the title \"original\" - I recreated the original artwork in here (with a smidge of artistic license).\n- A subfolder with the title \"remix\" -  this is where I go off and create my own thing.\n- If there is neither of these subfolders, it's likely to be my own creation.\n\nTo try out the experiments, you can install the dependencies and run a local dev server:\n\n```bash\nnpm install\nnpm run dev\n```\n\n\u003c!-- TOC --\u003e\n1. [Diamond Wipe](#diamond-wipe)\n1. [Sin City (Microaction Graphic Novel)](#sin-city-microaction-graphic-novel)\n1. [Orange, you thirsty?](#orange-you-thirsty)\n1. [Johnny Cash Busted](#johnny-cash-busted)\n1. [Straight Outta Some Swiss Canton](#straight-outta-some-swiss-canton)\n1. [They See Me Rollin](#they-see-me-rollin)\n1. [Dada](#dada)\n1. [Trump channeling Kanye](#trump-channeling-kanye)\n1. [Train Parallax](#train-parallax)\n1. [Black to White Disks](#black-to-white-disks)\n1. [LSD](#lsd)\n1. [Shiny book reveal](#shiny-book-reveal)\n1. [Christmas Decoration](#christmas-decoration)\n1. [Logo tilt](#logo-tilt)\n1. [NES Controller](#nes-controller)\n1. [Star Wars - Join the Alliance Recruitment Poster](#star-wars---join-the-alliance-recruitment-poster)\n1. [Star Wars - Circular Wipe Transition](#star-wars---circular-wipe-transition)\n1. [Bubble text with image background](#bubble-text-with-image-background)\n1. [Framed content](#framed-content)\n1. [Handpuppet blockquote](#handpuppet-blockquote)\n1. [WRDSMTH interactive art playground](#wrdsmth-interactive-art-playground)\n1. [Kafkaesque 3D animation](#kafkaesque-3d-animation)\n1. [Scrabble pseudo-typeface](#scrabble-pseudo-typeface)\n1. [First rule](#first-rule)\n1. [Don't let the bastards grind you down (June poster)](#dont-let-the-bastards-grind-you-down-june-poster)\n1. [Consolesque marqueeish text](#consolesque-marqueeish-text)\n1. [Snippets Ranger loader](#snippets-ranger-loader)\n1. [Christmas patterns](#christmas-patterns)\n1. [Football drop](#football-drop)\n\u003c!-- /TOC --\u003e\n\n## Diamond Wipe\n\nA diamond-shaped wipe reveal of text.\n\n\u003cimg\n\t\tsrc=\"diamond-wipe/img/demo.webp\"\n\t\talt=\"demo of sin city animation\"\n\t\twidth=\"787\"\n\t\theight=\"604\"\n/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/NWBdYRj).\n\nSee [\"diamond-wipe\" folder](/diamond-wipe) for code.\n\n## Sin City (Microaction Graphic Novel)\n\nAdd short bursts of action (animation) to a graphic novel.\n\n\u003cimg\n\t\tsrc=\"sin-city-microaction-graphic-novel/img/demo.gif\"\n\t\talt=\"demo of sin city animation\"\n\t\twidth=\"688\"\n\t\theight=\"271\"\n/\u003e\n\nIt autoscrolls to show each tab at the top of the page and cycles through to the next.\n\nI discuss this more in my post - [Make your own (interactive) graphic novel](https://www.roboleary.net/2021/07/14/make-your-own-graphic-novel.html).\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/eYVaZOr).\n\nSee [\"sin-city-microaction-graphic-novel\" folder](/sin-city-microaction-graphic-novel) for full info.\n\n## Orange, you thirsty?\n\nWhimsical take on a product card for orange juice. On hover, it reveals the product with an animation.\n\n\u003cimg src=\"orange-you-thirsty/img/screenshots/demo.gif\" alt=\"animated demo of Orange, you thirsty?\" width=432 height=504 loading=\"lazy\"/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/jObydPw).\n\nSee [\"orange-you-thirsty\" folder](/orange-you-thirsty) for full info.\n\n## Johnny Cash Busted\n\nAnimation of Johnny Cash's arrest sheet being filled out.\n\n\u003cimg src=\"johnny-cash-busted/img/screenshots/demo.gif\" alt=\"animated demo of Johnny Cash Busted\" width=600 height=628 loading=\"lazy\"/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/QxeqaE).\n\nSee [\"johnny-cash-busted\" folder](/johnny-cash-busted) for full info.\n\n## Straight Outta Some Swiss Canton\n\nA poster for a NWA concert.\n\nInspired by [this Swissted poster](https://www.swissted.com/products/n-w-a-at-skateland-u-s-a-1988) by Mike Joyce.\n\nSee [\"straight-outta-some-swiss-canton\" folder](/straight-outta-some-swiss-canton) for full info.\n\n### Original\n\n\u003cimg src=\"straight-outta-some-swiss-canton/img/screenshot-original.png\" alt=\"Straight Outta Some Swiss Canton screenshot\" width=400 height=601 loading=\"lazy\"/\u003e\n\n### Remix\n\nAnimated variant.\n\n\u003cimg src=\"straight-outta-some-swiss-canton/img/screenshot.gif\" alt=\"animated variant of Straight Outta Some Swiss Canton\" width=400 height=457 loading=\"lazy\"/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/YzWoMGE).\n\n## They See Me Rollin\n\nKitsch wordplay of the opening lines of Chamillionaires' song *Ridin Dirty*.\n\n\u003cimg src=\"they-see-me-rollin/img/screenshot.gif\" alt=\"animated demo of They See Me Rollin\" width=401 height=405 loading=\"lazy\"/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/pen/ZEpEKOb).\n\nSee [\"they-see-me-rollin\" folder](/they-see-me-rollin) for full info.\n\n## Dada\n\nRecreation of [this poster by Paul Rand](https://www.artic.edu/artworks/229395/dada-poster).\n\nSee [\"dada\" folder](/dada) for full info.\n\n### Original\n\n\u003cimg src=\"dada/img/screenshot.png\" alt=\"screenshot of Dada\" width=256 height=355 loading=\"lazy\"/\u003e\n\n### Remix\n\n\u003cimg src=\"dada/img/screenshot.gif\" alt=\"animated demo of Dada\" width=250 height=350 loading=\"lazy\"/\u003e\n\nCheck out the [codepen](https://codepen.io/robjoeol/full/XWKGEoR).\n\n## Trump channeling Kanye\n\nTrump spitting quotes from Kanye. Quotes are fetched from the [kanye.rest API](https://kanye.rest/).\n\n\u003cimg src=\"trump-channeling-kanye/img/demo.gif\" alt=\"demo of trump channeling Kanye\" width=\"400\" height=\"520\" loading=\"lazy\"\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/qeabZe).\n\nSee [\"trump-channeling-kanye\" folder](/trump-channeling-kanye) for full info.\n\n## Train Parallax\n\nCreated for an article - [How to make an awesome horizontal parallax animation](https://roboleary.net/css/2020/11/17/parallax-animation.html).\n\n\u003cimg src=\"train-parallax/img/screenshot.gif\" alt=\"animated demo of Train Parallax\" width=400 height=394 loading=\"lazy\"/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/pen/KKMYdQP).\n\nSee [\"train parallax\" folder](/train-parallax) for full info.\n\n## Black to White Disks\n\nThis is a web rendition of the painting [Black to White Disks](https://www.wikiart.org/en/bridget-riley/black-to-white-disks-1952) by Bridget Riley.\n\nSee [\"black-to-white-disks\" folder](/black-to-white-disks) for full info.\n\n### Original\n\nThe original is recreated faithfully in the 'original' folder.\n\n\u003cimg src=\"black-to-white-disks/img/screenshot.png\" alt=\"screenshot of Black to White Disks\" width=536 height=616 loading=\"lazy\"/\u003e\n\n### Remix\n\n\u003cimg src=\"black-to-white-disks/img/screenshot.gif\" alt=\"demo of Black to White Disks\" width=527 height=632 loading=\"lazy\"/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/pen/rNLqZPV).\n\n## LSD\n\nWeb rendition of the spot painting [LSD](https://www.wikiart.org/en/damien-hirst/lsd) by Damian Hirst.\n\nSee [\"lsd\" folder](/lsd) for full info.\n\n### Original\n\n\u003cimg src=\"lsd/img/original.png\" alt=\"screenshot of LSD\" width=527 height=434 loading=\"lazy\"/\u003e\n\n### Remix\n\n\u003cimg src=\"lsd/img/screenshot.gif\" alt=\"demo of LSD\" width=526 height=403 loading=\"lazy\"/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/VwQObmw).\n\n## Shiny book reveal\n\n3D hover effect to open a book and reveal a synopsis of the story. I wanted to try out creating realistic reflections.\n\n\u003cimg src=\"shiny-book-reveal/img/demo.gif\" alt=\"demo of hover effect\" width=\"470\" height=\"552\" loading=\"lazy\"/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/WmgVvx).\n\nSee [\"shiny-book-reveal\" folder](/shiny-book-reveal) for full info.\n\n## Christmas Decoration\n\nThis 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.\n\n\u003cimg src=\"christmas-decoration/img/demo.gif\" alt=\"demo of LSD\" width=600 height=293 loading=\"lazy\"/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/WNojGdm).\n\nSee [\"christmas-decoration\" folder](/christmas-decoration) for full info.\n\n## Logo tilt\n\nI wanted to try out a goofy idea. I wanted to animate a website’s logo so\nthat it would fall over when you scroll down, and right itself when you\nscroll up. In particular, I wanted the logo to be a head or have a\ncartoonish look.\n\n\u003cimg\n\t\tsrc=\"logo-tilt/img/demo.gif\"\n\t\talt=\"demo of logo tilt\"\n\t\twidth=\"638\"\n\t\theight=\"604\"\n\t\tloading=\"lazy\"\n/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/LYeQRwq).\n\nSee [\"logo-tilt\" folder](/logo-tilt) for full info.\n\n## NES Controller\n\nThis 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!\n\n\u003cimg\n\t\tsrc=\"nes-controller/img/screenshot.png\"\n\t\talt=\"screenshot of nes controller demo\"\n\t\twidth=\"867\"\n\t\theight=\"443\"\n\t\tloading=\"lazy\"\n/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/pen/ZELzVPV).\n\nSee [\"nes-controller\" folder](/nes-controller) for code.\n\n## Star Wars - Join the Alliance Recruitment Poster\n\nStar Wars recruitment poster, sort of.\n\n\u003cimg src=\"star-wars-join-the-alliance/img/screenshot.gif\" alt=\"animated demo of Join the Alliance (Star Wars)\" width=396 height=476 loading=\"lazy\"/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/pen/KKgKzXp).\n\nSee [\"star-wars-join-the-alliance\" folder](/star-wars-join-the-alliance) for full info.\n\n## Star Wars - Circular Wipe Transition\n\nCircular wipe transition of scenes.\n\nSince the [`mask` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/mask) is not fully implemented across browsers, I looked for alternatives that have better support.\n\nI created 2 versions:\n1. CSS `clip-path` version: The [`clip-path`](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) property is the basis of the animation. The transition edges are hard. You can see it in [this codepen](https://codepen.io/robjoeol/full/YzjQmoG).\n1. SVG `mask` version: A SVG [`mask`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask) is used. The transition edges are soft. You can see it in [this codepen](https://codepen.io/robjoeol/full/dyjzvdb).\n\nI discuss these implementations in the post - [An awesome, cross-browser Star Wars circular wipe transition? CSS houdini vs clippath vs mask](https://www.roboleary.net/css/2023/01/16/awesome-cross-browser-starwars-circular-wipe-transition-css-houdini-clipath-mask.html).\n\n\u003cimg src=\"star-wars-circular-wipe/assets/img/demo.webp\" alt=\"animated demo of circular wipe transition\" width=954 height=732 loading=\"lazy\"/\u003e\n\nSee [\"star-wars-circular-wipe\" folder](/star-wars-circular-wipe/) for code.\n\n## Bubble text with image background\n\nI wanted to see if I could create text with a background image and a stroked outline.\n\nTo achieve this, the following non-standard properties are required: `-webkit-background-clip: text` and `-webkit-text-stroke`.\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/OJwQYvy).\n\n\u003cimg src=\"bubble-text-image-background/img/screenshot.jpg\" alt=\"screenshot of miami text example of Bubble text with image background\" width=\"545\" height=\"292\" loading=\"lazy\"/\u003e\n\nSee [\"bubble-text-image-background\" folder](/bubble-text-image-background/) for code.\n\n## Framed content\n\nI 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.\n\nI 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.\n\n\u003cimg src=\"framed-content/img/screenshot.png\" alt=\"screenshot of content with a picture as border image\" width=\"654\" height=\"275\" loading=\"lazy\"/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/dygmZJr).\n\nSee [\"framed-content\" folder](/framed-content/) for code.\n\n## Handpuppet blockquote\n\nHave an image of a handpuppet affect the outline of a quotation. Uses `shape-outside` property.\n\n\u003cimg src=\"handpuppet-blockquote/img/screenshot.png\" alt=\"screenshot of quotation\" loading=\"lazy\"/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/yLRKvLW).\n\nSee [\"handpuppet-blockquote\" folder](/handpuppet-blockquote/) for code.\n\n## WRDSMTH interactive art playground\n\nAn interactive playground of the signature artwork of street artist WRDSMTH. [WRDSMTH](https://www.wrdsmth.com/) is a Los Angeles-based street artist known for his iconic image of a vintage typewriter featuring different sheets of inspirational text.\n\n\u003cimg src=\"wrdsmth/img/screenshot.jpg\" alt=\"screenshot of demo\" loading=\"lazy\"/\u003e\n\nSee [\"wrdsmth\" folder](/wrdsmth/) for code.\n\n### Attribution\n\n- Icons from [Material Design](https://material.io/resources/icons/?style=baseline).\n- Original audio sourced from Freesound:\n\t- [Typewriter by exterminat](https://freesound.org/people/exterminat/sounds/164807/)\n\n## Kafkaesque 3D animation\n\nA 3D CSS animation inspired by a quotation from the late, great author Franz Kafka:\n\n\u003e A book must be the axe for the frozen sea in us\n\n\u003chttps://github.com/robole/artifice/assets/3703647/c2b717e3-17f0-4245-bde5-40ef3abdd0d5\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/VRVEOK).\n\nSee [\"kafkaesque\" folder](/kafkaesque/) for code.\n\n## Scrabble pseudo-typeface\n\nCreates a pseudo-typeface that changes letters of a paragraph text into scrabble tiles.\n\n\u003cimg src=\"scrabble-typeface/img/screenshot.png\" alt=\"screenshot of demo\" width=\"755\" height=\"586\" loading=\"lazy\"/\u003e\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/dyyxgRZ).\n\nSee [\"scrabble-typeface\" folder](/scrabble-typeface/) for code.\n\n## First rule\n\nSimple animation riffing on the novel Fight Club's first rule.\n\nhttps://github.com/robole/artifice/assets/3703647/0f34ec86-91f9-4fcd-b51c-ad5ebfa36c58\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/KKwwJdo).\n\nSee [\"first-rule\" folder](/first-rule/) for code.\n\n## Don't let the bastards grind you down (June poster)\n\nA poster inspired by the phrase from the book [*The Handmaid's Tale*](https://en.wikipedia.org/wiki/The_Handmaid%27s_Tale). I am playing with the typographic style to give the text more character.\n\n\u003cimg src=\"june-poster/img/screenshot.png\" alt=\"screenshot of demo\" width=\"413\" height=\"578\" loading=\"lazy\"/\u003e\nBased on\n\nA Halloween themed design with animated bats and a transmuting cat.  \n\nAnimated 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.\n\nhttps://github.com/robole/artifice/assets/3703647/1fd4a497-7f49-432e-a6b6-567190e9961c\n\nChrome still requires that you use prefixed mask properties for this to work! [Interop 2023](https://web.dev/interop-2023/) is meant to sort this out soon..\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/QWzZWzr).\n\nSee [\"witchin-masks\" folder](/witchin-masks/) for code.\n\n## Consolesque marqueeish text\n\nI 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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee) did, but hopefully in a tasteful way!\n\nhttps://github.com/robole/artifice/assets/3703647/c9614128-41f7-4360-a69d-d78cf8189852\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/PoVjQzj)\n\nSee [\"consolesque-marqueeish-text\" folder](/consolesque-marqueeish-text/) for code.\n\n## Snippets Ranger loader\n\nThis is a loading animation for a VS Code extension I wrote called [Snippets Ranger](https://marketplace.visualstudio.com/items?itemName=robole.snippets-ranger).\n\nIt is meant to whimsical and eccentric. I wanted make something silly and annoying, and then dial it back enough so it is merely fun!\n\n![screenshot of snippets ranger loader. It is a pink hero on a rocket horse with a rotating stripey background](/snippets-ranger-loader/img/screenshot.jpeg)\n\nYou can check out the [demo](http://localhost:8080/demos/T6R3v_UM/preview/).\n\nSee [\"snippets-ranger-loader\" folder](snippets-ranger-loader/) for code.\n\n## Christmas patterns\n\nSimple geometric christmas patterns, animated for maximuim candy. Playing around with CSS gradients and SVG `pattern` and `symbol` elements to create different types of patterns.\n\n![screenshot of christmas patterns card. It is a grid of various patterns animated. Patterns such as candy cane stripe, a wavy white and brown pattern that resembles a christmas pudding with cream on top, and so on.](/christmas-patterns/img/screenshot.png)\n\nInspired by [this design by zzdesign](https://www.instagram.com/p/B6Gr2g6HbHM/).\n\nYou can check out the [codepen](https://codepen.io/robjoeol/full/gOEbPvZ).\n\nSee [\"christmas-patterns\" folder](christmas-patterns/) for code.\n\n## Football drop\n\nThis 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! 🙏\n\nSee [\"football-drop-animation\" folder](football-drop-animation/) for code.\n\nYou can check out the [codepen](https://codepen.io/robjoeol/pen/NWVbJEY).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobole%2Fartifice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobole%2Fartifice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobole%2Fartifice/lists"}