Text Refraction Effect

INFORMATION & CODE

Text Refraction Effect

What the Code Does

This code creates a visually engaging "Text Refraction Effect," making text appear as though it is submerged and distorted beneath moving water. It combines structural HTML, CSS styling, and keyframe animations to simulate a watery environment complete with shifting backgrounds, expanding ripples, and a split-text distortion effect.

How the Code Works

The mechanism relies heavily on CSS pseudo-elements (::before and ::after) attached to an HTML heading. The heading's content is dynamically pulled from its aria-label attribute (set to "Swimming"). The CSS uses clip-path to slice the text horizontally in half, applying separate 3D rotations, translations, and a slight blur to each half. This creates a wavy, refractive illusion that mimics how light bends through a liquid surface. Meanwhile, a background container animates a water-texture image, and a set of layered .ripple divs expand outward with staggered animation delays to simulate pulsing water ripples.

How to Use the Code

To use this code, simply copy the HTML snippet into an HTML file and the CSS snippet into a linked stylesheet (named styles.css to match the <link> tag). Ensure you have an internet connection so the browser can load the required external fonts and FontAwesome icons from the <head>. You can customize the displayed word by changing the aria-label="Swimming" and text properties in the HTML and CSS, allowing you to apply this fluid, refractive animation to any title or heading of your choice.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Refraction Effect</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js" crossorigin></script>
  </head>
  <body>
    <div class="outer-wrapper">
      <div class="wrapper">
        <div class="ripple-container">
          <div class="ripple"></div>
          <div class="ripple"></div>
          <div class="ripple"></div>
          <div class="ripple"></div>
          <div class="ripple"></div>
        </div>
        <h1 aria-label="Swimming"></h1>
      </div>
    </div>
  </body>
</html>

CSS


                      .outer-wrapper {
        width: 100%;
        max-width: 380px;
        height: 380px;
        margin: auto;
        background-color: #0ff;
        overflow: hidden;
      }
      
      .wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 380px;
        height: 380px;
        background: url(https://e-nash.net/photos/water-g13a7ad621_1920.jpg) no-repeat center;
	      background-size: 360px 360px;
        background-position: center center;
        box-shadow: inset 0 0 10px #000;
        animation: enlarge 10s linear infinite;
      }
      @keyframes enlarge {
        0% { background-size: 100% 100%; background-position: 0px 0px;}
        33% { background-size: 101% 101%; background-position: -2px -2px;}
        66% { background-size:102% 102%; background-position: -1px -1px;}
        100% { background-size: 100% 100%; background-position: 0px 0px;}
      }

      h1[aria-label="Swimming"] {
        position: relative;
        left: -50%;
        font-family: 'Roboto', Arial, sans-serif;
        font-size: 48px;
        font-weight: 700;
        color: #f00;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        perspective: 500px;
      }

      h1[aria-label="Swimming"]::before,
      h1[aria-label="Swimming"]::after {
        content: attr(aria-label);
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
        text-shadow: 0.01em 0.01em 0.01em rgba(0, 0, 0, 0.3);
      }

      h1[aria-label="Swimming"]::before {
        animation: textAbove 3.5s ease-in-out infinite;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
      }

      h1[aria-label="Swimming"]::after {
        opacity: 0.8;
        filter: blur(0.04em);
        transform: translate(-50%, -50%) rotateX(41deg);
        animation: textBelow 3.5s ease-in-out infinite;
        -webkit-clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
      }

      @keyframes textAbove {
        50% {
          transform: translate(-50%, -60%);
          -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 60%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 60%);
        }
      }

      @keyframes textBelow {
        50% {
          transform: translate(-50%, -60%) rotateX(-21deg);
          -webkit-clip-path: polygon(0% 60%, 100% 60%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 60%, 100% 60%, 100% 100%, 0% 100%);
        }
      }
      .ripple-container {
        display: flex;
        height: 380px;
        width: 100%;
        max-width: 380px;
        align-items: center;
        justify-content: center;
        background-color: rgba( 207, 207,255, 0.4);
        overflow: hidden;
      }

     .ripple {
        position: absolute;
        animation: ripple 10s infinite;
        width: 100%;
        max-width: 380px;
        height: 380px;
        border-radius: 100%;
        border: none;
        background-color: rgba(30, 30, 255, 0.4);
        box-shadow: inset 10px 10px 20px rgba(175,175,143,0.6), inset -10px -10px 20px rgba(255,255,255,0.3);
        transition: 0.33s ease-in all;
        opacity: 0;
      }


    @keyframes ripple {
      0% {
        width: 20px;
        height: 15px;
        opacity: 0.1;
      }
      25% {
        width: 360px;
        height: 360px;
        opacity: 0;
      }
      75% {
        width: 20px;
        height: 15px;
        opacity: 0.1;
      }
      100% {
        width: 360px;
        height: 360px;
        opacity: 0;
      }
    }

      .ripple-container .ripple:nth-child(1) {
        animation-delay: 0ms;
      }

      .ripple-container .ripple:nth-child(2) {
        animation-delay: 500ms;
       }

       .ripple-container .ripple:nth-child(3) {
         animation-delay: 1000ms;
       }

       .ripple-container .ripple:nth-child(4) {
         animation-delay: 1500ms;
       }

       .ripple-container .ripple:nth-child(5) {
         animation-delay: 2000ms;
       }

MENU

INFORMATION & CODE