Back

Reimagining Text Input with a Kaleidoscope Spinner

An exciting twist on the traditional text input, incorporating a kaleidoscope-inspired spinner to mesmerize users.

HTML

Let's create a container that will house both the text input and the kaleidoscope spinner. The spinner is comprised of small pieces that rotate like a kaleidoscope pattern to bring a sense of animation to this UI component.

        <div class="kaleido-container">
          <input type="text" class="kaleido-input" placeholder="Type here...">
          <div class="kaleido-spinner">
            <div class="kaleido-piece"></div>
            <div class="kaleido-piece"></div>
            <div class="kaleido-piece"></div>
            <div class="kaleido-piece"></div>
          </div>
        </div>

Javascript

This component uses a simple JavaScript event listener to trigger an animation whenever the user interacts with the input field. Upon receiving input, the spinner will be activated briefly to give a visual feedback.

        document.querySelector('.kaleido-input').addEventListener('input', () => {
          document.querySelector('.kaleido-spinner').classList.add('active');
          setTimeout(() => {
            document.querySelector('.kaleido-spinner').classList.remove('active');
          }, 1000);
        });

CSS

The CSS for this component includes forming the kaleidoscope effect by setting all spinner pieces to align and transform, giving an illusion of rotation. Each piece is a circle transformed and rotated, giving it a mesmerizing motion each time input is entered.

        .kaleido-container {
          position: relative;
          display: flex;
          align-items: center;
          border: 1px solid #ccc;
          border-radius: 12px;
          padding: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          background: rgba(255, 255, 255, 0.6);
          backdrop-filter: blur(10px);
        }

        .kaleido-input {
          background-color: transparent;
          width: 100%;
          border: none;
          outline: none;
          font-size: 16px;
          padding: 5px 10px;
        }

        .kaleido-spinner {
          display: flex;
          position: absolute;
          right: 15px;
          width: 20px;
          height: 20px;
          transition: transform 0.5s;
        }

        .kaleido-piece {
          background-color: #ff6f61;
          width: 5px;
          height: 5px;
          margin: 1px;
          border-radius: 50%;
          transform-origin: 5px 5px;
          transform: rotate(45deg);
        }

        .kaleido-spinner.active {
          transform: rotate(360deg);
        }

Whole code

<div class="kaleido-container">
  <input type="text" class="kaleido-input" placeholder="Type here...">
  <div class="kaleido-spinner">
    <div class="kaleido-piece"></div>
    <div class="kaleido-piece"></div>
    <div class="kaleido-piece"></div>
    <div class="kaleido-piece"></div>
  </div>
</div>


<script>
document.querySelector('.kaleido-input').addEventListener('input', () => {
  document.querySelector('.kaleido-spinner').classList.add('active');
  setTimeout(() => {
    document.querySelector('.kaleido-spinner').classList.remove('active');
  }, 1000);
});
</script>

<style>
.kaleido-container {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
}
.kaleido-input {
  background-color: transparent;
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 5px 10px;
}
.kaleido-spinner {
  display: flex;
  position: absolute;
  right: 15px;
  width: 20px;
  height: 20px;
  transition: transform 0.5s;
}
.kaleido-piece {
  background-color: #ff6f61;
  width: 5px;
  height: 5px;
  margin: 1px;
  border-radius: 50%;
  transform-origin: 5px 5px;
  transform: rotate(45deg);
}
.kaleido-spinner.active {
  transform: rotate(360deg);
}
</style>

Reimagining Text Input with a Kaleidoscope Spinner

HTML

Javascript

CSS

Whole code

Comments

More inputs

Similar

See also