Back

Crafting a Hypnotic Kaleidoscope Commentary Box

An artistic approach to a text input, transforming mundane text input into a mesmerizing experience with dynamic geometric patterns.

HTML

In our HTML setup, we'll have a div acting as the container, encapsulating our input and button elements. The button, when clicked, will trigger a kaleidoscope pattern.

 
     <div class="kaleidoscope-container">
       <input type="text" class="kaleidoscope-input" placeholder="Type here...">
       <button onclick="generatePattern()" class="pattern-button">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="15" viewBox="0 0 24 24" stroke="#6D4E90" stroke-width="2">
           <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v18m9-9H3"/>
         </svg>
       </button>
       <div class="pattern-display"></div>
     </div>

Javascript

For Javascript, we create the generatePattern function to dynamically change the border color and background pattern of our input container on button click.

 
     function generatePattern() {
       const patterns = ['#f06', '#f06868', '#68f0f0', '#f0f068'];
       const container = document.getElementsByClassName('kaleidoscope-container')[0];
       const patternDisplay = document.getElementsByClassName('pattern-display')[0];
       container.style.borderColor = patterns[Math.floor(Math.random() * patterns.length)];
       patternDisplay.style.background = `radial-gradient(circle, ${patterns.join(', ')})`;
       patternDisplay.classList.toggle('active');
     }

CSS

CSS is used to style the kaleidoscope input component, implementing a glassmorphism effect on the container along with transition animations to create a visually dynamic environment.

 
     .kaleidoscope-container {
       overflow: hidden;
       border: 2px dashed #6D4E90;
       border-radius: 20px;
       padding: 10px;
       background-color: rgba(255, 255, 255, 0.6);
       backdrop-filter: blur(10px);
       display: flex;
       align-items: center;
       position: relative;
       transition: border-color 0.3s ease;
     }
     .pattern-button {
       margin-left: 10px;
       border: none;
       background: transparent;
       cursor: pointer;
       display: flex;
       align-items: center;
       transition: transform 0.3s;
     }
     .pattern-button:active {
       transform: scale(0.9);
     }
     .kaleidoscope-input {
       border: none;
       background: none;
       outline: none;
       width: 100%;
       padding: 5px;
     }
     .pattern-display {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       opacity: 0;
       z-index: -1;
       transition: opacity 0.5s ease;
     }
     .pattern-display.active {
       opacity: 0.8;
     }

This carefully crafted component turns a simple text input into a captivating, interactive piece that draws users in with its artful flair and dynamic transformations.

Whole code

<div class="kaleidoscope-container">
  <input type="text" class="kaleidoscope-input" placeholder="Type here...">
  <button onclick="generatePattern()" class="pattern-button">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="15" viewBox="0 0 24 24" stroke="#6D4E90" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v18m9-9H3"/>
    </svg>
  </button>
  <div class="pattern-display"></div>
</div>

<script>
function generatePattern() {
  const patterns = ['#f06', '#f06868', '#68f0f0', '#f0f068'];
  const container = document.getElementsByClassName('kaleidoscope-container')[0];
  const patternDisplay = document.getElementsByClassName('pattern-display')[0];
  container.style.borderColor = patterns[Math.floor(Math.random() * patterns.length)];
  patternDisplay.style.background = `radial-gradient(circle, ${patterns.join(', ')})`;
  patternDisplay.classList.toggle('active');
}
</script>

<style>
.kaleidoscope-container {
  overflow: hidden;
  border: 2px dashed #6D4E90;
  border-radius: 20px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  position: relative;
  transition: border-color 0.3s ease;
}
.pattern-button {
  margin-left: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: transform 0.3s;
}
.pattern-button:active {
  transform: scale(0.9);
}
.kaleidoscope-input {
  border: none;
  background: none;
  outline: none;
  width: 100%;
  padding: 5px;
}
.pattern-display {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s ease;
}
.pattern-display.active {
  opacity: 0.8;
}
</style>

Crafting a Hypnotic Kaleidoscope Commentary Box

HTML

Javascript

CSS

Whole code

Comments

More inputs

Similar

See also