js实现ASCII文字径向扩散涟漪波动互动动画代码-html代码-BFW代码库

js实现ASCII文字径向扩散涟漪波动互动动画代码

代码语言：html

所属分类：动画

代码描述：js实现ASCII文字径向扩散涟漪波动互动动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');
    
* { margin: 0; padding: 0; box-sizing: border-box; }
    html {
      --color-bg: #121211;
      --color-text: #f9f9f7d3;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    html, body {
      width: 100%; height: 100%;
      overflow: hidden;
      background: var(--color-bg);
      color: var(--color-text);
      font-family: 'JetBrains Mono', monospace;
      cursor: crosshair;
      touch-action: none;
      user-select: none;
    }
    #field { width: 100vw; height: 100vh; }
    .so { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .lil-gui { z-index: 100; --font-family: 'JetBrains Mono', monospace; --font-size: 11px; }
    body::after {
      content: ''; position: fixed; inset: 0;
      background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.45) 100%);
      pointer-events: none; z-index: 1;
    }
</style>


  
  
</head>

<body translate="no">
  <h1 class="so">ASCII Radial Wave Text Effect Experiment of Bastien Cornier - Creative developer based in Lyon, France</h1>
  <div id="field"></div>
  
    <script type="module">
import GUI from 'https://esm.sh/lil-gui@0.20';

const cfg = {
  dur: 2050,
  speed: 670,
  bandWidth: 268,
  shrink: 2.5,
  trail: 2.2,
  noise: 4,
  chars: '.,·-─~+:;=*π┐┌┘╔╝║╚!?1742&35$690#@8$▀▄■░▒▓',
  charSpeed: 76,
  density: 1.25,
  minDist: 69,
  maxWaves: 16,
  fontSize: 15,
  lineHeight: 1.35 };


const EXCERPT = `Many people will probably judge us callous as well as mad for thinking about the northward tunnel and the abyss so soon after our somber discovery, and I am not prepared to say that we would have immediately revived such thoughts but for a specific circumstance which broke in upon us and set up a whole new train of speculations. We had replaced the tarpaulin over poor Gedney and were standing in a kind of mute bewilderment when the sounds finally reached our consciousness—the first sounds we had heard since descending out of the open where the mou.........完整代码请登录后点击上方下载按钮下载查看