Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <form class="terrible-text" id="terrible-text">
  <label for="name">Your Halloween Name: </label>
  <div><input id="name" type="text" placeholder="make it spooookyyy!"></div>
</form>
              
            
!

CSS

              
                body,
html {
  height: 100%;
  //display: grid;
  overflow: hidden;
}
html {
  font-size: 400%;
}
body {
  background-color: #999;
  margin: 0;
}

.terrible-text {
  margin: auto;
  padding: 72px;
  font-family: "Creepster", cursive;
  position: relative;
}
.terrible-text div {
  position: relative;
}
input {
  font-size: inherit;
  padding: 0;
  vertical-align: top;
  line-height: 1;
  border: none;
  border-bottom: 10px solid black;
  background: transparent;
  transition: 0.5s 0s;
  max-width: 100%;
}
input:focus {
  outline: none;
}

canvas {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  pointer-events: none;
}

.submitted input {
  color: transparent;
}

body:after {
  //content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  clip-path: polygon(
    0% 30%,
    0% 100%,
    100% 100%,
    100% 25%,
    80% 25%,
    60% 45%,
    55% 35%
  );
  height: calc(100vh - 100px);
}

              
            
!

JS

              
                const img = new Image(); // Create new img element
img.src =
  "data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='1114.000000pt' height='1280.000000pt' viewBox='0 0 1114.000000 1280.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cmetadata%3E%0ACreated by potrace 1.15, written by Peter Selinger 2001-2017%0A%3C/metadata%3E%3Cg transform='translate(0.000000,1280.000000) scale(0.100000,-0.100000)'%0Afill='%23000000' stroke='none'%3E%3Cpath d='M7220 12790 c0 -64 246 -623 668 -1520 316 -671 320 -680 335 -680 9%0A0 12 -9 9 -30 -2 -17 1 -49 6 -73 10 -38 -5 -123 -157 -882 -101 -506 -173%0A-841 -180 -843 -23 -8 -72 -55 -87 -84 -8 -16 -21 -60 -28 -96 -12 -64 -30%0A-92 -400 -647 -214 -319 -385 -569 -382 -555 79 362 74 833 -15 1185 -168 667%0A-558 1109 -1016 1154 -236 23 -472 -65 -681 -254 -383 -348 -612 -1069 -551%0A-1735 27 -307 111 -625 219 -839 l31 -63 -33 7 c-18 4 -34 8 -34 9 -1 0 -144%0A323 -318 716 -175 393 -324 720 -332 726 -8 6 -14 24 -14 40 0 16 -9 49 -21%0A73 -11 26 -16 47 -10 50 9 6 -41 280 -259 1411 -109 565 -109 563 -50 1105 22%0A209 54 504 70 655 16 151 48 446 70 655 23 209 44 409 47 445 l6 65 -112 -223%0Ac-112 -225 -145 -309 -180 -462 -61 -268 -123 -754 -167 -1314 -16 -201 -17%0A-211 -44 -248 -38 -53 -53 -123 -39 -188 10 -47 32 -82 87 -137 12 -12 22 -29%0A22 -37 0 -13 43 -314 199 -1384 41 -275 59 -427 55 -456 -12 -87 55 -205 125%0A-221 26 -5 60 -66 389 -691 353 -670 360 -685 350 -721 -21 -75 23 -188 82%0A-215 37 -16 39 -28 5 -28 -21 0 -1468 435 -1703 511 -62 21 -63 21 -57 53 5%0A24 2 36 -12 49 -17 15 -31 16 -119 7 -109 -10 -784 -11 -1102 -1 -112 3 -206%0A4 -208 1 -3 -2 -38 -4 -79 -5 -73 0 -75 1 -86 28 -7 15 -17 26 -24 23 -12 -4%0A-1444 -1114 -1475 -1142 -12 -12 -12 -16 0 -28 13 -12 117 43 775 415 620 350%0A767 429 797 429 20 0 48 4 62 10 19 7 37 5 68 -8 39 -15 98 -17 608 -17 432 0%0A570 -3 587 -13 30 -17 78 -15 115 4 35 18 20 21 248 -39 96 -24 220 -55 275%0A-67 55 -12 147 -38 205 -58 124 -41 574 -216 848 -330 174 -72 196 -84 232%0A-125 23 -26 53 -48 69 -52 28 -6 459 -180 468 -188 2 -3 -30 -34 -71 -71 -87%0A-78 -395 -407 -414 -442 l-13 -25 -30 21 c-16 12 -33 20 -38 18 -4 -2 -79 -84%0A-167 -183 -219 -249 -408 -457 -548 -604 -128 -135 -171 -193 -187 -256 -10%0A-40 -11 -40 -49 -37 -83 8 -170 -62 -170 -136 0 -29 -25 -60 -213 -260 -255%0A-270 -498 -508 -622 -607 -107 -85 -119 -99 -112 -124 4 -15 -1 -21 -23 -26%0A-15 -3 -42 -21 -61 -41 -25 -26 -33 -43 -33 -72 0 -20 3 -44 7 -52 5 -10 -46%0A-107 -149 -285 -178 -309 -361 -615 -414 -695 -20 -30 -40 -62 -44 -70 -9 -17%0A-17 -27 299 345 127 148 306 357 398 464 92 107 167 198 167 202 0 5 -4 9 -9%0A9 -5 0 0 17 11 38 18 36 19 57 3 96 -8 17 -5 19 32 13 l41 -7 437 458 c252%0A263 448 461 464 466 70 24 83 31 112 63 26 30 30 42 28 84 l-3 49 494 475%0Ac430 413 498 475 525 475 88 0 162 56 172 129 4 28 10 40 18 37 7 -2 48 18 90%0A45 67 43 76 47 61 24 -84 -128 -208 -372 -201 -395 7 -24 -4 -45 -25 -45 -10%0A0 -64 -114 -167 -355 -162 -377 -223 -503 -311 -640 -57 -90 -147 -200 -188%0A-232 -29 -23 -31 -38 -4 -38 18 0 18 -2 -6 -37 -14 -21 -28 -51 -31 -66 -4%0A-21 -11 -27 -25 -25 -22 3 -4 63 -247 -807 -73 -258 -146 -510 -162 -560 -42%0A-124 -127 -285 -214 -407 -50 -72 -68 -104 -58 -106 8 -2 12 -10 9 -19 -3 -8%0A-6 -26 -6 -39 0 -17 -6 -24 -19 -24 -16 0 -23 -17 -45 -107 -45 -190 -346%0A-1499 -346 -1505 0 -3 8 -8 18 -10 17 -5 56 91 311 755 232 603 298 766 322%0A789 34 35 43 65 36 119 -5 36 -3 39 18 39 13 0 26 8 30 18 3 9 136 366 295%0A792 158 426 298 800 309 830 15 39 31 62 56 79 49 33 79 99 73 162 -5 47 -4%0A50 16 45 20 -5 31 23 165 387 308 843 288 792 325 809 31 15 66 68 66 100 0 8%0A27 54 60 102 33 48 82 124 109 170 l47 84 -4 -53 c-5 -67 12 -145 48 -213 27%0A-50 28 -57 23 -147 -7 -110 2 -132 68 -166 72 -36 102 -10 111 96 2 24 7 29%0A23 27 92 -12 126 -12 173 1 60 16 57 18 67 -55 11 -82 50 -98 123 -51 58 38%0A69 79 49 187 -13 74 -13 82 4 110 40 68 58 213 34 279 -3 6 3 22 13 35 l18 23%0A39 -70 c30 -55 41 -68 51 -60 10 8 20 4 39 -19 14 -17 35 -34 46 -37 13 -4 18%0A-12 15 -22 -4 -8 20 -56 55 -111 99 -158 132 -239 233 -577 111 -374 192 -657%0A201 -709 4 -20 15 -41 24 -46 26 -14 -6 123 362 -1520 55 -245 102 -453 105%0A-462 3 -10 14 -18 25 -18 15 0 19 -7 19 -31 0 -34 13 -64 43 -97 13 -14 88%0A-237 212 -635 171 -547 194 -612 211 -609 10 2 20 5 20 5 1 1 -2 31 -7 67 -9%0A71 -59 481 -114 943 -48 401 -39 361 -85 353 -32 -5 -38 -3 -43 14 -3 11 -1%0A36 4 56 19 68 -21 223 -119 461 -99 240 -193 596 -328 1241 -24 117 -44 225%0A-44 240 0 15 -9 42 -20 60 -11 18 -20 39 -20 46 0 7 -11 38 -24 67 -34 78%0A-235 666 -366 1074 -69 214 -121 359 -134 373 -32 36 -72 53 -127 54 l-49 0%0A20 29 c29 40 37 43 66 24 25 -16 27 -16 41 5 15 21 15 21 58 -19 24 -22 63%0A-49 87 -61 23 -13 262 -159 531 -327 268 -167 493 -303 500 -300 6 2 17 -9 24%0A-24 6 -15 28 -38 48 -51 32 -20 71 -91 358 -648 295 -573 324 -625 349 -628%0A25 -3 26 -5 17 -35 -5 -18 -9 -48 -8 -67 1 -55 242 -942 257 -948 7 -2 17 -1%0A22 4 10 10 -33 1000 -44 1026 -5 11 -2 17 8 20 20 4 -763 1328 -794 1343 -12%0A6 -20 20 -20 33 0 36 -61 92 -99 92 -24 0 -31 4 -29 17 2 12 -132 113 -467%0A354 -358 258 -475 347 -492 376 -31 53 -61 73 -112 73 -36 0 -41 2 -32 14 10%0A11 1 21 -46 49 -74 44 -207 111 -256 128 -51 18 -48 50 6 61 51 11 111 42 179%0A94 66 52 158 151 158 173 0 9 18 24 39 34 21 10 50 35 64 55 24 36 31 40 143%0A70 66 18 182 50 259 71 77 21 298 82 490 136 193 53 431 119 530 147 99 27%0A248 68 330 90 83 22 162 48 178 59 27 19 27 19 27 0 0 -11 6 -23 13 -28 6 -4%0A331 -155 722 -336 646 -298 711 -326 722 -311 14 20 17 19 35 -17 7 -14 161%0A-219 342 -456 284 -373 331 -431 347 -422 16 8 10 24 -64 167 -45 86 -167 322%0A-272 524 -104 202 -194 366 -200 365 -5 -1 -22 7 -38 17 -15 10 -36 16 -48 13%0A-16 -4 -19 -1 -17 15 3 24 88 -14 -956 424 -308 130 -573 243 -589 252 -69 39%0A-80 44 -112 44 -17 0 -47 -8 -66 -18 -19 -10 -41 -19 -49 -20 -14 -1 -575%0A-173 -795 -244 -49 -16 -252 -79 -450 -140 -198 -61 -416 -129 -484 -151 -68%0A-21 -131 -39 -140 -39 -9 0 -28 -8 -42 -18 -15 -9 -88 -59 -162 -109 l-136%0A-93 -8 53 c-4 28 -8 55 -8 58 0 3 50 46 110 96 106 87 255 234 255 252 0 4 21%0A11 46 14 59 6 106 50 136 128 13 32 223 365 467 741 351 541 450 686 475 699%0A21 10 41 35 61 73 24 49 30 72 32 140 2 69 39 231 236 1019 129 515 231 937%0A227 937 -4 0 -10 28 -13 63 -3 34 -13 78 -21 98 -8 20 -11 40 -7 45 5 5 -71%0A141 -170 304 -132 217 -221 380 -337 615 -277 561 -425 809 -612 1030 -70 83%0A-150 154 -150 135z m-1844 -6512 c4 -6 -2 -7 -17 -3 -35 10 -45 23 -15 18 15%0A-3 29 -10 32 -15z m1184 -774 c0 -6 -4 -4 -77 43 -29 19 -53 38 -53 43 0 5 29%0A-11 65 -36 36 -25 65 -48 65 -50z'/%3E%3C/g%3E%3C/svg%3E%0A";
function easeInExpo(x) {
  return x === 0 ? 0 : Math.pow(2, 10 * x - 10);
}
class TextDesintegrator {
  constructor(el, form, options) {
    const defaultOptions = {
      padding: 150,
      density: 5,
      duration: 6000 // in ms
    };
    this.form = form;
    this.step = 0;
    this.data = [];
    this.scale = 2; // pixel density
    this.el = el;
    this.el.style.position = "relative";
    this.inner = this.el.querySelector("span");
    this.options = { ...defaultOptions, ...options };
    this.createCanvas();
    this.form.addEventListener("submit", (e) => {
      e.preventDefault();
      this.fillCanvas();
      this.start();
      this.form.classList.add("submitted");
    });
  }
  createCanvas() {
    // get the width and the height of the element
    // canvas will have the same dimensions
    const { width, height } = this.el.getBoundingClientRect();
    this.height = height;
    this.width = width;
    this.canvas = document.createElement("canvas");
    this.canvas.width = this.scale * (this.width + 2 * this.options.padding);
    this.canvas.height = this.scale * (this.height + 2 * this.options.padding);
    this.canvas.style.width = `${this.width + 2 * this.options.padding}px`;
    this.canvas.style.height = `${this.height + 2 * this.options.padding}px`;
    this.canvas.style.transform = `translate3d(${-this.options
      .padding}px, ${-this.options.padding}px, 0)`;
    this.context = this.canvas.getContext("2d");
    this.context.scale(this.scale, this.scale);
    this.el.after(this.canvas);
  }
  clearContext() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
  fillCanvas() {
    const style = getComputedStyle(this.el);
    this.color = "rgb(0, 0, 0)";
    this.context.fillStyle = this.color;
    this.context.globalAlpha = 1;
    this.context.font = style.getPropertyValue("font");
    this.context.textBaseline = "ideographic";
    this.clearContext();
    this.context.fillText(
      this.el.value,
      this.options.padding,
      (this.canvas.height / this.scale + this.height) / 2 - 10
    );
  }
  start() {
    this.t0 = 0;
    this.fillCanvas();
    this.pixelize();
    this.render();
  }
  pixelize() {
    this.data = [];
    const { padding, density, duration } = this.options;
    for (
      let y = 0;
      y < this.canvas.height + 2 * padding - Math.floor(density / 2);
      y += density
    ) {
      for (
        let x = 0;
        x < this.canvas.width + 2 * padding - Math.floor(density / 2);
        x += density
      ) {
        const { data } = this.context.getImageData(
          x + Math.floor(density / 4),
          y + Math.floor(density / 4),
          1,
          1
        );
        const [, , , a] = data;
        if (a > 0) {
          this.data.push({
            alpha: a / 255,
            longevity: Math.min(
              duration * 0.25 + Math.random() * duration * 0.75,
              duration - 100
            ),
            x,
            y,
            initialX: x,
            initialY: y,
            finalX: x + 2 * (Math.random() - 0.5) * this.canvas.width,
            finalY: y + 2 * (Math.random() - 0.5) * this.canvas.width
          });
        }
      }
    }
  }

  render(timestamp = 0) {
    if (!this.t0) {
      this.t0 = timestamp;
    }
    const elapsed = timestamp - this.t0;
    this.step = elapsed;
    this.updateData();
    this.clearContext();

    for (const sq of this.data) {
      this.context.globalAlpha = sq.alpha;
      this.context.fillStyle = this.color;
      this.context.drawImage(
        img,
        sq.x / 2 + (sq.x / 2) * 0.05 * (Math.random() - 0.5),
        sq.y / 2 -
          this.options.density +
          (sq.y / 2) * 0.05 * (Math.random() - 0.5),
        this.options.density * 2 * (1 + (3 * elapsed) / this.options.duration),
        0.5 *
          this.options.density *
          2 *
          (1 + (3 * elapsed) / this.options.duration)
      );
    }
    this.canvas.style.transformOrigin = "100px 100px";
    this.canvas.style.filter = `blur(${
      1 * easeInExpo(elapsed / this.options.duration)
    }px)`;
    this.canvas.style.transform = `translate3d(${-this.options
      .padding}px, ${-this.options.padding}px, 0) scale(${
      1 + 1 * easeInExpo(elapsed / this.options.duration)
    })`;
    if (elapsed > this.options.duration) {
      this.onComplete();
    } else {
      requestAnimationFrame((t) => this.render(t));
    }
  }
  onComplete() {
    if (this.id) {
      window.cancelAnimationFrame(this.id);
    }
    this.data = [];
    this.form.classList.remove("submitted");
    this.form.reset();
  }
  updateData() {
    for (const sq of this.data) {
      sq.alpha = this.calculateOpacity(sq.longevity, this.step);
      sq.x = this.calculatePosition(
        sq.initialX,
        sq.finalX,
        sq.longevity,
        this.step
      );
      sq.y = this.calculatePosition(
        sq.initialY,
        sq.finalY,
        sq.longevity,
        this.step
      );
    }
  }
  calculatePosition(xS, xE, l, x) {
    const expo = (l, x) => {
      return x < l ? 1 - Math.pow(2, 15 * (x / l) - 15) : 0;
    };
    const val = (xS - xE) * expo(l, x) + xE;
    return val;
  }
  calculateOpacity(l, x) {
    return x <= l ? 1 - Math.pow(x / l, 3) : 0;
  }
}

const form = document.querySelector("#terrible-text");
const target = form.querySelector("input");
const spooky = new TextDesintegrator(target, form);

              
            
!
999px

Console