Magic wand reveal with html,css,js

Title: Unleashing the Magic: The Art of Creating a Wand Reveal

Introduction: Magic has always held a special place in the hearts and imaginations of people around the world. The concept of a magical wand that can make wishes come true is an iconic symbol in the realm of enchantment. From fairy tales to the world of Harry Potter, the magic wand has captured our collective fascination. In this blog post, we will delve into the captivating art of creating a magic wand reveal, unveiling the secrets behind this mystical prop and exploring the techniques that bring it to life.

  1. Understanding the Magic Wand: A magic wand reveal is a moment of pure wonderment that adds flair and excitement to any magical performance. It’s essential to understand the fundamental components and features of a magic wand. Wands can be made from various materials such as wood, metal, or even plastic, each possessing its own unique characteristics. A wand typically consists of a handle, body, and a distinct tip where the magic happens.
  2. Selecting the Perfect Wand: Choosing the right wand is crucial in creating an impactful reveal. Consider the aesthetic and theme of your performance. Do you want a classic, elegant wand or a more modern and whimsical design? Additionally, think about the functionality of the wand. Will it be used solely for reveals, or will it have other magical capabilities? Take time to explore different options and find a wand that resonates with your artistic vision.
  3. Concealing the Mechanism: The secret behind a wand reveal lies in its ability to hide the mechanism responsible for the magic. Several techniques can be employed to achieve this illusion. One popular method is to have a spring-loaded mechanism inside the wand that extends the tip when activated. Alternatively, magnets can be used to control the movement of the tip, creating a seamless reveal. The key is to ensure the mechanism is hidden within the design of the wand, making it appear ordinary until the magic is unleashed.
  4. Practice Makes Perfect: As with any magical performance, practice is paramount. Familiarize yourself with the intricacies of your wand’s mechanism and perfect your sleight of hand. The wand should become an extension of your arm, allowing you to perform the reveal effortlessly. Practice different hand movements and gestures that complement the reveal, enhancing the overall impact and adding to the illusion of true magic.
  5. Presentation and Showmanship: A magic wand reveal is not solely about the mechanics; it is a theatrical performance that captivates the audience. Consider the storytelling aspect of your act and how the wand reveal fits into the narrative. Choose the right moment to unveil the magic, building anticipation and creating a sense of wonder. Utilize your showmanship skills to engage and mesmerize your audience, making them believe in the impossible.
  6. Enhancing the Wand Reveal: To elevate the impact of your wand reveal, consider incorporating other magical elements into your performance. Smoke, light effects, or sound cues can enhance the illusion and add layers of enchantment. However, be mindful not to overshadow the wand itself; the reveal should remain the focal point.
  1. Customization and Personalization: One way to make your wand reveal truly unique is through customization and personalization. Consider adding embellishments, engravings, or unique patterns to the wand that reflect your personality or the theme of your performance. This attention to detail adds an extra layer of charm and makes the wand feel like an extension of yourself. By infusing your own touch into the design, you create a more intimate connection with the prop and the magic it produces.
  2. Building Suspense and Surprise: The element of surprise is a powerful tool in magic. Take advantage of the wand reveal to build suspense and keep your audience on the edge of their seats. You can accomplish this by incorporating misdirection or utilizing a clever setup that distracts their attention momentarily. By carefully orchestrating the timing and execution of the reveal, you can create an awe-inspiring moment that leaves a lasting impression.
  3. Evolving the Wand Reveal: While traditional wand reveals have their charm, don’t be afraid to experiment and push the boundaries of creativity. Explore innovative ways to enhance the reveal, such as incorporating technology or combining multiple magical effects. For instance, you could integrate LED lights into the wand, creating a mesmerizing glow as it unfolds. The key is to stay open-minded and continuously seek new ways to surprise and delight your audience.
  4. Sharing the Wonder: Finally, remember that the magic wand reveal is meant to be shared and experienced by others. Whether you’re performing for a small gathering or a large audience, the joy and wonder that the reveal brings can be infectious. Embrace the opportunity to inspire and entertain, leaving a lasting impression on those who witness the magic firsthand.

html code:

<div id="wand">
  <div class="cap"></div>
</div>

<div id="tiles">
  <div class="tile">
    <i class="fa-solid fa-image"></i>
    <img src="https://assets.codepen.io/1468070/mousepad-tile-1.png?format=auto&quality=80" />
  </div>
  <div class="tile">
    <i class="fa-solid fa-image"></i>
    <img src="https://assets.codepen.io/1468070/mousepad-tile-4.png?format=auto&quality=80" />
  </div>
  <div class="tile">
    <i class="fa-solid fa-image"></i>
    <img src="https://assets.codepen.io/1468070/mousepad-tile-3.png?format=auto&quality=80" />
  </div>
</div>

css code:

body {  
  background: rgb(2, 6, 23);
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#wand {
  width: 10vmin;
  aspect-ratio: 1 / 10;
  background: linear-gradient(
    to right, 
    rgb(26 24 28) 10%, 
    rgb(42 40 44) 45% 55%, 
    rgb(26 24 28) 90%
  );
  position: absolute;
  left: 5%;
  top: 20%;
  translate: -50%;
  rotate: -3deg;
  z-index: 100;
  border-radius: 3vmin;
  box-shadow: 0vmin 1vmin 4vmin rgb(0 0 0 / 80%);
  overflow: hidden;
}

#wand > .cap {
  height: 20%;
  width: 100%;
  background: linear-gradient(
    to right, 
    rgb(212 221 236) 10%, 
    rgb(255 255 255) 45% 55%, 
    rgb(212 221 236) 90%
  );
}

#tiles {
  display: flex;
}

.tile {
  display: grid;
  place-items: center;
  width: 38vmin;
  aspect-ratio: 1;
  background-color: rgb(31, 41, 55);
  border-radius: 6vmin;
  box-shadow: 0vmin 3vmin 6vmin rgb(0 0 0 / 25%),
    inset 0vmin 0.5vmin 1vmin rgb(255 255 255 / 15%);
  position: relative;
  overflow: hidden;
}

.tile:nth-child(1) {
  rotate: 3deg;
  z-index: 3;
}

.tile:nth-child(2) {
  rotate: -2deg;
  z-index: 2;
}

.tile:nth-child(3) {
  rotate: 5deg;
  z-index: 1;
}

.tile:is(:nth-child(2), :nth-child(3)) {
  margin-left: -10vmin;
}

.tile > i {
  font-size: 15vmin;
  color: rgb(255 255 255 / 10%);
}

.tile > img {
  height: 100%;
  aspect-ratio: 1;
  position: absolute;
  left: 0px;
  top: 0px;
  object-fit: cover;
  opacity: var(--opacity);
  filter: blur(calc(var(--blur) * 10px));
}

java script code :

const wand = document.getElementById("wand"),
      tiles = document.querySelectorAll(".tile");

const xy = (x, y) => ({ x, y }),
      px = value => `${value}px`,
      deg = value => `${value}deg`,
      clamp = (value, min, max) => Math.max(Math.min(value, max), min);

const updateMouse = (mouseX, mouseY) => {
  const { innerWidth: windowWidth, innerHeight: windowHeight } = window;
  
  const mouse = {
    position: xy(mouseX, mouseY),
    decimal: xy(mouseX / windowWidth, mouseY / windowHeight),
    multiplier: xy(1.3, 0.4),
    offset: xy(windowWidth * -0.15, windowHeight * 0.1),
    modifiedPosition: xy(0, 0)
  }
  
  mouse.modifiedPosition.x = mouse.position.x * mouse.multiplier.x + mouse.offset.x;  
  mouse.modifiedPosition.y = mouse.position.y * mouse.multiplier.y + mouse.offset.y;  
  
  return mouse;
}

const revealImages = mouseX => {
  for(const tile of tiles) {
    const dimensions = tile.getBoundingClientRect(),
          relativeMouseX = mouseX - dimensions.left,
          mouseXAsDecimal = clamp(relativeMouseX / dimensions.width, 0, 1);
    
    const opacity = mouseXAsDecimal,
          blur = 1 - mouseXAsDecimal;
    
    tile.style.setProperty("--opacity", opacity);
    tile.style.setProperty("--blur", blur);
  }
}

const getWandStyles = mouse => ({
  left: px(mouse.modifiedPosition.x),
  top: px(mouse.modifiedPosition.y),
  rotate: deg(mouse.decimal.x * 20 - 10)
});

window.onmousemove = e => {
  const mouse = updateMouse(e.clientX, e.clientY),  
        wandStyles = getWandStyles(mouse);
  
  wand.animate(wandStyles, { duration: 400, fill: "forwards" });
  
  revealImages(mouse.modifiedPosition.x);
}

full code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {  
  background: rgb(2, 6, 23);
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#wand {
  width: 10vmin;
  aspect-ratio: 1 / 10;
  background: linear-gradient(
    to right, 
    rgb(26 24 28) 10%, 
    rgb(42 40 44) 45% 55%, 
    rgb(26 24 28) 90%
  );
  position: absolute;
  left: 5%;
  top: 20%;
  translate: -50%;
  rotate: -3deg;
  z-index: 100;
  border-radius: 3vmin;
  box-shadow: 0vmin 1vmin 4vmin rgb(0 0 0 / 80%);
  overflow: hidden;
}

#wand > .cap {
  height: 20%;
  width: 100%;
  background: linear-gradient(
    to right, 
    rgb(212 221 236) 10%, 
    rgb(255 255 255) 45% 55%, 
    rgb(212 221 236) 90%
  );
}

#tiles {
  display: flex;
}

.tile {
  display: grid;
  place-items: center;
  width: 38vmin;
  aspect-ratio: 1;
  background-color: rgb(31, 41, 55);
  border-radius: 6vmin;
  box-shadow: 0vmin 3vmin 6vmin rgb(0 0 0 / 25%),
    inset 0vmin 0.5vmin 1vmin rgb(255 255 255 / 15%);
  position: relative;
  overflow: hidden;
}

.tile:nth-child(1) {
  rotate: 3deg;
  z-index: 3;
}

.tile:nth-child(2) {
  rotate: -2deg;
  z-index: 2;
}

.tile:nth-child(3) {
  rotate: 5deg;
  z-index: 1;
}

.tile:is(:nth-child(2), :nth-child(3)) {
  margin-left: -10vmin;
}

.tile > i {
  font-size: 15vmin;
  color: rgb(255 255 255 / 10%);
}

.tile > img {
  height: 100%;
  aspect-ratio: 1;
  position: absolute;
  left: 0px;
  top: 0px;
  object-fit: cover;
  opacity: var(--opacity);
  filter: blur(calc(var(--blur) * 10px));
}
  </style>
</head>
<body>
  <div id="wand">
    <div class="cap"></div>
  </div>
  
  <div id="tiles">
    <div class="tile">
      <i class="fa-solid fa-image"></i>
      <img src="https://assets.codepen.io/1468070/mousepad-tile-1.png?format=auto&quality=80" />
    </div>
    <div class="tile">
      <i class="fa-solid fa-image"></i>
      <img src="https://assets.codepen.io/1468070/mousepad-tile-4.png?format=auto&quality=80" />
    </div>
    <div class="tile">
      <i class="fa-solid fa-image"></i>
      <img src="https://assets.codepen.io/1468070/mousepad-tile-3.png?format=auto&quality=80" />
    </div>
  </div>
  <script>
    const wand = document.getElementById("wand"),
      tiles = document.querySelectorAll(".tile");

const xy = (x, y) => ({ x, y }),
      px = value => `${value}px`,
      deg = value => `${value}deg`,
      clamp = (value, min, max) => Math.max(Math.min(value, max), min);

const updateMouse = (mouseX, mouseY) => {
  const { innerWidth: windowWidth, innerHeight: windowHeight } = window;
  
  const mouse = {
    position: xy(mouseX, mouseY),
    decimal: xy(mouseX / windowWidth, mouseY / windowHeight),
    multiplier: xy(1.3, 0.4),
    offset: xy(windowWidth * -0.15, windowHeight * 0.1),
    modifiedPosition: xy(0, 0)
  }
  
  mouse.modifiedPosition.x = mouse.position.x * mouse.multiplier.x + mouse.offset.x;  
  mouse.modifiedPosition.y = mouse.position.y * mouse.multiplier.y + mouse.offset.y;  
  
  return mouse;
}

const revealImages = mouseX => {
  for(const tile of tiles) {
    const dimensions = tile.getBoundingClientRect(),
          relativeMouseX = mouseX - dimensions.left,
          mouseXAsDecimal = clamp(relativeMouseX / dimensions.width, 0, 1);
    
    const opacity = mouseXAsDecimal,
          blur = 1 - mouseXAsDecimal;
    
    tile.style.setProperty("--opacity", opacity);
    tile.style.setProperty("--blur", blur);
  }
}

const getWandStyles = mouse => ({
  left: px(mouse.modifiedPosition.x),
  top: px(mouse.modifiedPosition.y),
  rotate: deg(mouse.decimal.x * 20 - 10)
});

window.onmousemove = e => {
  const mouse = updateMouse(e.clientX, e.clientY),  
        wandStyles = getWandStyles(mouse);
  
  wand.animate(wandStyles, { duration: 400, fill: "forwards" });
  
  revealImages(mouse.modifiedPosition.x);
}
  </script>
</body>
</html>

conclusion:

In conclusion, the art of creating a magic wand reveal is a captivating journey that combines craftsmanship, performance skills, and an unwavering belief in the power of imagination. By understanding the components of the wand, perfecting the mechanics, and infusing your personal touch, you can create a moment of pure enchantment that will transport your audience to a world where anything is possible. So, let your creativity soar, and let the magic unfold as you reveal the extraordinary with a simple flick of your wand.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top