# Trick or Treat design elements and animations > In this blog post, we will pull out some of the design elements and animations and talk about them. We really enjoyed this project because it allowed us to add in many fun things; we added a lot of animations to give that extra special ingredient in our cauldron to make it a potent potion. Source: https://pixelhop.io/writing/trick-or-treat-design-elements-and-animations/ --- [Back to writing](https://pixelhop.io/writing/) # Trick or Treat design elements and animations. Gemma / 29 Oct 2021 [AI](https://pixelhop.io/writing/tags/ai/) [Vue.js](https://pixelhop.io/writing/tags/vue-js/) In this blog post, we will pull out some of the design elements and animations and talk about them. We really enjoyed this project because it allowed us to add in many fun things; we added a lot of animations to give that extra special ingredient in our cauldron to make it a potent potion. We've recently built and launched trick or treat, a fun little mini-experiment web project that uses pose detection to skeletonise your body in real-time. We've written in more detail what this [here](https://www.pixelhop.io/writing/trick-or-treat-halloween-experiment/), or why not just head straight to the project [here](https://trick-or-treat.pixelhop.io/). In all honesty, we had to refrain from spending loads of time adding lots of animations, but we had to draw the line somewhere. ## Landing page πŸ’œ πŸŽƒ One thing we would have loved to add but didn't have time was an animation of a hand or body coming out of the ground by the graveyard, but you never know; maybe we will be able to in the future. We wanted the landing page to be tongue-in-cheek, colourful, vibrant, and playful. Trick or Treat was just a bit of fun, with some cool technologies used in the background. We could have shown off the technology by creating a demo that teaches you yoga or checks your running technique, and whilst they'd be helpful, we wanted to do something a little different. Like the sensible people, we decided to use AI pose detection to turn people into skeletons. Of course, the landing page is still branded with splashes of Pixelhop's branding, but we "Halloween-ified" it by adding in the purple background, not forgetting to add in the odd ghosts and ghoulies here and there. ## Logo πŸ•ΈπŸ•· One talking point is the Trick or Treat logo; as you can see, it animates in nicely, drawing the users attention as soon as the page is loaded. We paid particular attention to a "friendly evil" looking spider that drops down. We animated the logo by grouping individual layers in the SVG, allowing us to animate them independently. To try and make the animations look realistic, we follow "The Illusion of Life", which are 12 principles that Walt Disneys Studios came up with within the 1930s. In the video below, we've slowed down the animation. There were certain things you can spot here to make the fall look more realistic, one being how the spider bounces back up and then drops back down; following the laws of gravity, it drops but bounces back up a bit. It doesn't just drop and stop at the bottom. This follows the "squash and stretch" principle that gives the illusion of weight to the spider. Another thing to note are the spiders legs- when the spider is dropping down, it's legs go up, and when the spider is going up it's legs go down. This follows the "Follow through and overlapping" principle; when the spider drops to the bottom, its legs move after it, the whole spider doesn't stop at once. Finally, the "exaggeration" principle can also be seen in the spider's movement and facial expression. When things are exaggerated in animation it makes it more fun and playful. ## Eye πŸ‘ πŸ‘ We wanted to add the eye at the bottom of the page to track the user's cursor. The mouse tracking eye is the sort of subtle detail we love adding to projects; it just adds a little bit extra to the page; it changes the page from static or stagnant to something alive and dynamic. So Talie built in the functionality and wrote a blog post on how he achieved that [here](https://www.pixelhop.io/writing/create-a-mouse-tracking-eye-using-vue-3-vueuse-and-css/). ## Ghosts and ghoulies πŸ‘» 😈 Another way in which we gave the page a bit of life was by adding in the hovering ghosts and bats. In addition, we added in the blinking animation on the ghost to make them more characterful. Adding that subtle secondary animation allows for the animation there all the time without overwhelming or stressing the user out. ## Curtains We decided to add the curtains around the webcam because it's a nice way of framing the webcam thematically. It creates a "stage" for where the magic is about to happen, creates a bit of drama, and becomes more theatrical. Animating the curtains was an iterative process, proving the power of The Illusion of Life, and how important the different principles are in conveying the correct "feel" across. For example, here, you can see that the animation was more bouncy, connotating a joyful, happy message rather than a more "Halloweeny" one. We then had to think about how do we make it a little scarier; rather than bouncing up and down; it needed to be a bit more shakey from side to side and jalty. The keyframes needed to be closer together, so it rattles around more, and we added horizontal and vertical translation to make the movement more aggressive and the movements of the curtains sharper. And eventually, we got to the version, which we were happy with. ## Skeleton Finally, I just wanted to talk about the skeleton briefly; after all, that is the main part of this little mini-experiment. We chose to use a skeleton for multiple reasons, one obvious one being it fits the Halloween theme very well. It's also perfect a perfect way to demo the technology, you can see how the head, arms and legs are mapped to the body in real-time. When you move, the skely moves too. It's exactly the way we wanted to showcase this tech. Playful and fun, like we are, here at Pixelhop. Zef wrote a detailed blog and tutorial on how to transform your body and skeletonise yourself, which can be found [here](https://www.pixelhop.io/writing/skeletonise-yourself-with-pose-detection/). I could go on and on about all the other visual elements, its something we're really passionate about and love, as you can tell we're real sticklers for aesthetics and love to be a bit different and stand out - it's also how we approached the design of our own website. We'd love to hear about your fav animations or design elements on the Trick and Treat site, you can contact us on our website [here](https://www.pixelhop.io/contact/) or on Twitter [here](https://twitter.com/pixelhopio). If you would like to get notified about any future blogs or news, just sign up for our newsletter. ### 14 Responses [Web Mentions?](#) Want to respond? [Tweet this post!](https://twitter.com/intent/tweet?via=pixelhopio&text=Trick or Treat design elements and animations&url=https://pixelhop.io/writing/trick-or-treat-design-elements-and-animations/) #### 7 Likes - [](https://twitter.com/pixelhopio/status/1454114626577240064#favorited-by-175500261) - [](https://twitter.com/pixelhopio/status/1457610042715295745#favorited-by-82356450) - [](https://twitter.com/pixelhopio/status/1457610042715295745#favorited-by-45635682) - [](https://twitter.com/pixelhopio/status/1457610042715295745#favorited-by-42756112) - [](https://twitter.com/pixelhopio/status/1454114626577240064#favorited-by-4824581584) - [](https://twitter.com/pixelhopio/status/1454114626577240064#favorited-by-45635682) - [](https://twitter.com/pixelhopio/status/1454114626577240064#favorited-by-42756112) #### 4 Reposts - [](https://twitter.com/lilGemVincent/status/1457624890526343169) - [](https://twitter.com/jozefmaxted/status/1457633367655079938) - [](https://twitter.com/GoaiDev/status/1454114657036242946) - [](https://twitter.com/lilGemVincent/status/1454114732802285574) #### 3 Replies - [@Pixelhop](https://twitter.com/pixelhopio/status/1461295743268962305): Wow thank you so much πŸ™ - [@Augusta](https://twitter.com/Augusta%5Freqe/status/1461286101289631746): This is amazing - [@Jozef Maxted](https://twitter.com/jozefmaxted/status/1454115279399751691): Although our Halloween site is only a silly experiment we still put lots of thought into the details. If you are interested in web animations you might find some interesting tips here 🀩 ### Tags [WebAR](https://pixelhop.io/writing/tags/webar/) [Hop Tips](https://pixelhop.io/writing/tags/hop-tips/) [Nuxt](https://pixelhop.io/writing/tags/nuxt/) [AI](https://pixelhop.io/writing/tags/ai/) [Typescript](https://pixelhop.io/writing/tags/typescript/) [Snipcart](https://pixelhop.io/writing/tags/snipcart/) [Be the Forest](https://pixelhop.io/writing/tags/be-the-forest/) [Gridsome](https://pixelhop.io/writing/tags/gridsome/) [TensorFlowJs](https://pixelhop.io/writing/tags/tensorflowjs/) [JAMstack](https://pixelhop.io/writing/tags/jamstack/) [Kubernetes](https://pixelhop.io/writing/tags/kubernetes/) [News](https://pixelhop.io/writing/tags/news/) [Side projects](https://pixelhop.io/writing/tags/side-projects/) [stack.earth](https://pixelhop.io/writing/tags/stack-earth/) [Strapi](https://pixelhop.io/writing/tags/strapi/) [Node.js](https://pixelhop.io/writing/tags/node-js/) [Tailwind UI](https://pixelhop.io/writing/tags/tailwind-ui/) [Vue.js](https://pixelhop.io/writing/tags/vue-js/) [Three.js](https://pixelhop.io/writing/tags/three-js/) [VuePress](https://pixelhop.io/writing/tags/vuepress/) [Spicy Tips](https://pixelhop.io/writing/tags/spicy-tips/) [Design](https://pixelhop.io/writing/tags/design/) [Business](https://pixelhop.io/writing/tags/business/) [Development](https://pixelhop.io/writing/tags/development/) [AI](https://pixelhop.io/writing/tags/ai/) ### Subscribe. Like what you’re reading? Sign up to receive our updates straight to your inbox. No spam, unsubscribe anytime! ### Related posts. [All writing](https://pixelhop.io/writing/) [AI](https://pixelhop.io/writing/tags/ai/) [AI agents](https://pixelhop.io/writing/tags/ai-agents/) [Business](https://pixelhop.io/writing/tags/business/) 09 Nov 2026 #### What we learned from 67 agent readiness audits We checked 67 websites for agent readiness: who has an llms.txt, who blocks AI crawlers, why Shopify stores do well, and how much traffic ChatGPT sends. [Read more](https://pixelhop.io/writing/agent-readiness-study-2026/) [AI](https://pixelhop.io/writing/tags/ai/) [AI agents](https://pixelhop.io/writing/tags/ai-agents/) [AI product development](https://pixelhop.io/writing/tags/ai-product-development/) [Development](https://pixelhop.io/writing/tags/development/) 16 Oct 2026 #### Our agentic coding workflow: how we make coding agents check their own work How visual verification works in our agentic coding workflow. Our coding agents screenshot and record every UI change, check the captures themselves and put the evidence in the pull request. [Read more](https://pixelhop.io/writing/agentic-coding-workflow-visual-verification/) [AI](https://pixelhop.io/writing/tags/ai/) [AI product development](https://pixelhop.io/writing/tags/ai-product-development/) [AI agents](https://pixelhop.io/writing/tags/ai-agents/) [Business](https://pixelhop.io/writing/tags/business/) 16 Oct 2026 #### How much does AI development cost? Our real prices for 2026 What it really costs to build and run an AI product, agent or automation in 2026, using our actual prices, real projects and today's model pricing. [Read more](https://pixelhop.io/writing/how-much-does-ai-development-cost/)