How to Build a Transformative Time-Lapse Watercolor Input

In this tutorial, we're going to build a unique input field that transforms its background with colors reminiscent of a watercolor painting. Imagine typing and watching the canvas below your fingertips morph with color gradients, bringing a touch of creativity to mundane text inputs.

HTML Setup

We'll start by setting up a simple HTML structure. Our input field will live inside a container that helps us center it on the page.

        <div class="watercolor-container">
          <input type="text" id="watercolorInput" oninput="animateWatercolor()" aria-label="Watercolor animated input" class="watercolor-input" placeholder="Type to paint...">
        </div>
      

Note the use of aria-label to provide an accessible name for screen readers, ensuring that users of all needs can understand the purpose of our input field.

CSS - Setting the Scene

Our CSS will capitalize on beautiful gradients to simulate a watercolor effect. The gradients will transition smoothly as the user types, creating a delightful tactile motion.

        .watercolor-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
        }
      

Here, .watercolor-container centers everything using Flexbox. Now, let's create magic inside the input itself:

        .watercolor-input {
          width: 60%;
          max-width: 600px;
          padding: 15px;
          border: none;
          border-radius: 8px;
          font-size: 18px;
          font-weight: 500;
          transition: background 0.4s ease-in-out;
          outline: none;
          color: #fff;
          background-size: 200% 200%;
          background-position: left center;
          background: linear-gradient(135deg, #3498db, #9b59b6);
        }
      

The primary gradient is initialized with complementary colors that will blend seamfully as transitions occur. Check out our smooth transition effects!

Javascript - Bringing Colors to Life

Time to script some magic with JavaScript. Our goal is to cycle through color gradients as typing occurs, simulating a painting process.

        let colorIndex = 0;
        const colors = ['#f1c40f', '#e67e22', '#e74c3c', '#8e44ad', '#3498db', '#1abc9c', '#2ecc71'];
        function animateWatercolor() {
          let inputField = document.querySelector('.watercolor-input');
          inputField.style.background = `linear-gradient(135deg, ${colors[colorIndex]}, ${colors[(colorIndex + 1) % colors.length]})`;
          inputField.style.backgroundSize = '200% 200%';
          inputField.style.backgroundPosition = 'center';
          colorIndex = (colorIndex + 1) % colors.length;
        }
      

Each keystroke triggers the animateWatercolor function, which updates the background color with a gradient dynamically. We're looping through an array of vibrant colors to maintain the element of surprise and interaction.

Accessibility and Responsiveness

It's essential to ensure accessibility and functionality across devices. We use aria-label for descriptive accessibility. Focus styles emphasize the interactive elements further for keyboard users.

For users who prefer reduced motion, consider adding a media query to disable transitions:

        @media (prefers-reduced-motion: reduce) {
          .watercolor-input {
            transition: none;
          }
        }
      

Ensuring inclusivity is a hallmark of well-crafted design.

Conclusion

Voila! With just a dash of creativity and a splash of code, you've crafted an input field that's more than functional—it's an immersive experience. Share your colorful creations and inspire others to transform their everyday inputs into sensational works of art.