518a3ce174
Brings the whole project into git (previously only the on-ramp feature and a few parallel files were tracked). Includes: wallet core (src/), CashScript contracts/, the Capacitor shell (shells/), scripts/, tests, and the docs corpus (wiki/, snapshots/, Parameters/, Archive/, KnowledgeBase text). Excluded via .gitignore: node_modules/, dist/, .env (secrets), testnet WIF key files (.chipnet-*.json, devWallets.ts), KnowledgeBase/RAW media (~9.6 GB), transcripts/ (session logs), and machine-local config (.claude/*.local, *.lock). Secret-scanned before commit — no credentials in the tree. Note: src/swapMath.ts, src/swapBuilder.ts, contracts/OpenMintToken.cash are legacy (OP_RETURN era) but still imported; committed as-is, flagged for a separate removal once de-referenced. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
624 lines
19 KiB
HTML
624 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Deviant</title>
|
|
<meta name="description" content="Deviant exists to enable resistance — by giving users on-chain experience that intermediation cannot mediate.">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--sky-deep: #050810;
|
|
--sky-mid: #0a0f1c;
|
|
--sky-rim: #131a2a;
|
|
--star-faint: rgba(255, 255, 255, 0.22);
|
|
--star-mid: rgba(255, 255, 255, 0.38);
|
|
--star-bright: rgba(255, 255, 255, 0.58);
|
|
|
|
--ink-soft: #b8c2d4;
|
|
--ink: #d6dde9;
|
|
--ink-bright: #f1f4fa;
|
|
--muted: #6a7488;
|
|
|
|
--acid: #d6ff3d;
|
|
--acid-glow: rgba(214, 255, 61, 0.55);
|
|
--acid-halo: rgba(214, 255, 61, 0.22);
|
|
--acid-dim: rgba(214, 255, 61, 0.08);
|
|
|
|
--rust-deep: #6b2a1c;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html, body {
|
|
background: var(--sky-deep);
|
|
color: var(--ink);
|
|
font-family: 'Fraunces', Georgia, serif;
|
|
font-weight: 400;
|
|
font-feature-settings: "ss01", "ss02";
|
|
font-synthesis: none;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
overflow-x: hidden;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
body {
|
|
background:
|
|
radial-gradient(ellipse at top, var(--sky-rim) 0%, transparent 60%),
|
|
radial-gradient(ellipse at bottom right, var(--sky-mid) 0%, transparent 50%),
|
|
radial-gradient(ellipse at bottom left, #0c1424 0%, transparent 55%),
|
|
var(--sky-deep);
|
|
background-attachment: fixed;
|
|
position: relative;
|
|
}
|
|
|
|
/* Starfield */
|
|
.stars {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.star {
|
|
position: absolute;
|
|
background: var(--star-faint);
|
|
border-radius: 50%;
|
|
animation: twinkle var(--twinkle-duration, 12s) ease-in-out infinite;
|
|
animation-delay: var(--twinkle-delay, 0s);
|
|
}
|
|
|
|
@keyframes twinkle {
|
|
0%, 100% { opacity: 0.35; }
|
|
50% { opacity: 0.85; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.star { animation: none; opacity: 0.4; }
|
|
}
|
|
|
|
/* Layout */
|
|
.container {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 1180px;
|
|
margin: 0 auto;
|
|
padding: 0 32px;
|
|
}
|
|
|
|
/* Top bar */
|
|
.topbar {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 32px 0 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.wordmark {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 500;
|
|
font-size: 22px;
|
|
letter-spacing: -0.01em;
|
|
color: var(--ink-bright);
|
|
text-decoration: none;
|
|
line-height: 1;
|
|
}
|
|
|
|
.wordmark::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 5px;
|
|
height: 5px;
|
|
background: var(--acid);
|
|
border-radius: 50%;
|
|
margin-left: 7px;
|
|
vertical-align: middle;
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
0 0 6px var(--acid-glow),
|
|
0 0 14px var(--acid-halo);
|
|
}
|
|
|
|
.nav {
|
|
display: flex;
|
|
gap: 36px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.nav a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
transition: color 0.4s ease;
|
|
}
|
|
|
|
.nav a:hover { color: var(--ink-bright); }
|
|
|
|
/* Hero */
|
|
.hero {
|
|
min-height: calc(100vh - 100px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 64px 0 96px;
|
|
position: relative;
|
|
}
|
|
|
|
.label {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.28em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
margin-bottom: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.label::before {
|
|
content: "";
|
|
width: 22px;
|
|
height: 1px;
|
|
background: var(--muted);
|
|
}
|
|
|
|
.opening {
|
|
max-width: 920px;
|
|
}
|
|
|
|
.opening p {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 300;
|
|
font-size: clamp(22px, 3.2vw, 36px);
|
|
line-height: 1.42;
|
|
letter-spacing: -0.012em;
|
|
color: var(--ink);
|
|
margin-bottom: 28px;
|
|
font-variation-settings: "opsz" 96;
|
|
}
|
|
|
|
.opening p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.opening .o2 {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.opening .o3 {
|
|
color: var(--ink-bright);
|
|
}
|
|
|
|
/* The rotating word */
|
|
.rot-wrap {
|
|
display: inline-block;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.rot-word {
|
|
display: inline-block;
|
|
color: var(--ink-bright);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
transition: opacity 0.55s ease;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.rot-word { transition: none; }
|
|
}
|
|
|
|
/* Deviation glow — acid green luminescence */
|
|
.deviation {
|
|
color: var(--acid);
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
text-shadow:
|
|
0 0 4px var(--acid-glow),
|
|
0 0 14px var(--acid-halo),
|
|
0 0 32px var(--acid-dim);
|
|
}
|
|
|
|
/* Response line — slim mark, no box */
|
|
.response {
|
|
margin-top: 56px;
|
|
max-width: 760px;
|
|
position: relative;
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.response::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 6px;
|
|
bottom: 6px;
|
|
width: 2px;
|
|
background: var(--acid);
|
|
box-shadow:
|
|
0 0 6px var(--acid-glow),
|
|
0 0 14px var(--acid-halo);
|
|
}
|
|
|
|
.response p {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 400;
|
|
font-size: clamp(18px, 1.9vw, 22px);
|
|
line-height: 1.55;
|
|
letter-spacing: -0.005em;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.response strong {
|
|
color: var(--ink-bright);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Pathways */
|
|
.pathways {
|
|
padding: 112px 0 96px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.pathways-label {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.28em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
margin-bottom: 56px;
|
|
}
|
|
|
|
.path-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 48px;
|
|
}
|
|
|
|
.path {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: block;
|
|
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.path:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.path-num {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.22em;
|
|
color: var(--muted);
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.path-title {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 400;
|
|
font-size: 26px;
|
|
line-height: 1.25;
|
|
letter-spacing: -0.012em;
|
|
color: var(--ink-bright);
|
|
margin-bottom: 14px;
|
|
font-variation-settings: "opsz" 72;
|
|
}
|
|
|
|
.path-desc {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 300;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
color: var(--ink-soft);
|
|
font-variation-settings: "opsz" 14;
|
|
}
|
|
|
|
.path-arrow {
|
|
display: inline-block;
|
|
margin-top: 18px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
transition: color 0.4s ease, gap 0.4s ease;
|
|
}
|
|
|
|
.path:hover .path-arrow { color: var(--acid); }
|
|
|
|
.path-arrow::after {
|
|
content: " →";
|
|
display: inline-block;
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.path:hover .path-arrow::after { transform: translateX(4px); }
|
|
|
|
/* Footer */
|
|
footer {
|
|
padding: 56px 0 48px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
gap: 32px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.footer-mark {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 400;
|
|
font-size: 15px;
|
|
color: var(--muted);
|
|
max-width: 480px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.footer-mark strong {
|
|
color: var(--ink);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.footer-meta {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
text-align: right;
|
|
}
|
|
|
|
.footer-meta div { margin-bottom: 6px; }
|
|
.footer-meta div:last-child { margin-bottom: 0; }
|
|
|
|
/* Positioning — what Deviant is */
|
|
.positioning {
|
|
padding: 112px 0 96px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
.pos-statement { max-width: 980px; margin-top: 8px; }
|
|
.surfaces {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 44px 48px;
|
|
margin-top: 80px;
|
|
}
|
|
.surface-name {
|
|
font-family: 'Fraunces', serif; font-weight: 400; font-size: 22px;
|
|
color: var(--ink-bright); margin-bottom: 8px; letter-spacing: -0.012em;
|
|
font-variation-settings: "opsz" 72;
|
|
}
|
|
.surface-desc {
|
|
font-family: 'Fraunces', serif; font-weight: 300; font-size: 15px;
|
|
line-height: 1.6; color: var(--ink-soft); font-variation-settings: "opsz" 14;
|
|
}
|
|
.clean-note { margin-top: 80px; }
|
|
.clean-tags { display: flex; flex-wrap: wrap; gap: 12px 28px; }
|
|
.clean-tags span {
|
|
font-family: 'JetBrains Mono', monospace; font-size: 11px;
|
|
letter-spacing: 0.18em; text-transform: uppercase; color: var(--acid);
|
|
}
|
|
.clean-note p {
|
|
margin-top: 24px; max-width: 720px;
|
|
font-family: 'Fraunces', serif; font-weight: 300; font-size: 16px;
|
|
line-height: 1.62; color: var(--ink-soft);
|
|
}
|
|
.slogan-line {
|
|
margin-top: 88px;
|
|
font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
|
|
font-size: clamp(26px, 4vw, 44px); letter-spacing: -0.01em;
|
|
color: var(--acid);
|
|
text-shadow: 0 0 6px var(--acid-glow), 0 0 18px var(--acid-halo), 0 0 40px var(--acid-dim);
|
|
}
|
|
|
|
/* Mobile */
|
|
@media (max-width: 880px) {
|
|
.container { padding: 0 22px; }
|
|
.topbar { padding-top: 24px; }
|
|
.nav { display: none; }
|
|
.opening p { font-size: clamp(20px, 5.4vw, 28px); }
|
|
.hero { min-height: calc(100vh - 80px); padding: 48px 0 72px; }
|
|
.response { margin-top: 56px; padding-left: 22px; }
|
|
.response p { font-size: 17px; }
|
|
.pathways { padding: 88px 0 72px; }
|
|
.path-grid { grid-template-columns: 1fr; gap: 56px; }
|
|
.pathways-label { margin-bottom: 40px; }
|
|
footer { flex-direction: column; align-items: flex-start; }
|
|
.footer-meta { text-align: left; }
|
|
.positioning { padding: 88px 0 72px; }
|
|
.surfaces { grid-template-columns: 1fr; gap: 44px; margin-top: 56px; }
|
|
.clean-note { margin-top: 56px; }
|
|
.slogan-line { margin-top: 64px; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.container { padding: 0 18px; }
|
|
.label { font-size: 9px; margin-bottom: 32px; }
|
|
.label::before { width: 14px; }
|
|
.opening p { font-size: 19px; line-height: 1.45; }
|
|
.response p { font-size: 16px; }
|
|
.path-title { font-size: 22px; }
|
|
}
|
|
|
|
/* Skip-link for accessibility */
|
|
.skip { position: absolute; left: -9999px; }
|
|
.skip:focus {
|
|
left: 12px; top: 12px; z-index: 100;
|
|
padding: 8px 14px; background: var(--ink-bright); color: var(--sky-deep);
|
|
font-family: 'JetBrains Mono', monospace; font-size: 11px;
|
|
letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="#main" class="skip">Skip to content</a>
|
|
|
|
<div class="stars" aria-hidden="true" id="stars"></div>
|
|
|
|
<div class="container">
|
|
<div class="topbar">
|
|
<a href="/" class="wordmark">Deviant</a>
|
|
<nav class="nav" aria-label="Primary">
|
|
<a href="#corpus">Corpus</a>
|
|
<a href="#wallet">Wallet</a>
|
|
<a href="#architecture">Architecture</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<main id="main" class="hero">
|
|
<div class="label">A response to a default trajectory</div>
|
|
|
|
<div class="opening">
|
|
<p class="o1">When the institutional, technical, economic, and rhetorical forces all point in the same direction, the outcome they point toward becomes the default trajectory.</p>
|
|
<p class="o2"><span class="deviation">Deviation</span> from the trajectory requires active resistance.</p>
|
|
<p class="o3">In a <span class="rot-wrap"><span class="rot-word" id="rot">captured</span></span> information environment with limited resistance capacity, the default trajectory is what occurs.</p>
|
|
</div>
|
|
|
|
<div class="response">
|
|
<p><strong>Deviant</strong> exists to enable that resistance — by giving users on-chain experience that <em>intermediation cannot mediate</em>.</p>
|
|
</div>
|
|
</main>
|
|
|
|
<section class="positioning" id="what" aria-label="What Deviant is">
|
|
<div class="pathways-label">What this is</div>
|
|
|
|
<div class="opening pos-statement">
|
|
<p>Deviant is the first wallet for an asset class that exists <span class="deviation">nowhere else</span> — a Bitcoin‑Cash‑backed asset you can redeem at a fixed rate, at any time, with no issuer, no custodian, and no counterparty. Enforced by mathematics, not trust.</p>
|
|
</div>
|
|
|
|
<div class="response">
|
|
<p>Permissionless mint, fixed rate, unlimited reservoir — the contract replaces the market maker, the liquidity provider, and the counterparty at once. Mint from a permissionless covenant; exit by burning your output back to its Bitcoin‑Cash floor; swap to any other permissionless‑mint asset in a single atomic transaction. <strong>No pool. No oracle. No one to ask.</strong></p>
|
|
</div>
|
|
|
|
<div class="surfaces">
|
|
<div class="surface"><div class="surface-name">Avalanche</div><div class="surface-desc">Create. Genesis in one transaction — core parameters sealed, irreversible.</div></div>
|
|
<div class="surface"><div class="surface-name">Spectrum</div><div class="surface-desc">View. Every position, across every dimension, at once.</div></div>
|
|
<div class="surface"><div class="surface-name">Transition</div><div class="surface-desc">Transition. Soft layer to hard layer — same asset, enforcement hardened.</div></div>
|
|
<div class="surface"><div class="surface-name">Orbital Network</div><div class="surface-desc">Swap. Zero counterparty, priced by the Universal Exchange Rate.</div></div>
|
|
</div>
|
|
|
|
<div class="clean-note">
|
|
<div class="clean-tags"><span>No issuer</span><span>No custodian</span><span>No counterparty</span><span>No token sale</span></div>
|
|
<p>Not a fundraise, not a pre‑mine. The contract is small enough to read end to end in an evening — read it, replay the chain, break it or trust it. The wallet reports facts the chain has already settled; it never asks you to trust it.</p>
|
|
</div>
|
|
|
|
<div class="slogan-line">Power Your Ideas.</div>
|
|
</section>
|
|
|
|
<section class="pathways" id="pathways" aria-label="Project pathways">
|
|
<div class="pathways-label">Where to begin</div>
|
|
|
|
<div class="path-grid">
|
|
<a href="#corpus" class="path">
|
|
<div class="path-num">— 01</div>
|
|
<div class="path-title">The corpus</div>
|
|
<div class="path-desc">Documentary record of how Bitcoin was specified, what it became, and what divergence between the two means structurally. Read before forming a view on what comes next.</div>
|
|
<div class="path-arrow">Enter the record</div>
|
|
</a>
|
|
|
|
<a href="#wallet" class="path">
|
|
<div class="path-num">— 02</div>
|
|
<div class="path-title">The wallet</div>
|
|
<div class="path-desc">On-chain experience without intermediation. The CosmoGenesis surface for sending, receiving, and minting value-bearing assets the captured layer cannot mediate.</div>
|
|
<div class="path-arrow">Open the wallet</div>
|
|
</a>
|
|
|
|
<a href="#architecture" class="path">
|
|
<div class="path-num">— 03</div>
|
|
<div class="path-title">The architecture</div>
|
|
<div class="path-desc">DEAs, MBA assets, the on-chain primitives that make resistance operational rather than rhetorical. For readers who want the technical substrate, not the framing.</div>
|
|
<div class="path-arrow">Read the substrate</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="footer-mark">
|
|
<strong>Deviant</strong> is built on Bitcoin Cash because, measured against the whitepaper, BCH retains the structural properties the original specification depends on. The base layer matters.
|
|
</div>
|
|
<div class="footer-meta">
|
|
<div>Version 0.1 · CosmoGenesis</div>
|
|
<div>Last updated · May 2026</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// Generate starfield
|
|
(function generateStars() {
|
|
const container = document.getElementById('stars');
|
|
if (!container) return;
|
|
|
|
const count = window.innerWidth < 700 ? 100 : 180;
|
|
const frag = document.createDocumentFragment();
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
const s = document.createElement('div');
|
|
s.className = 'star';
|
|
|
|
// Most stars are tiny and faint
|
|
const roll = Math.random();
|
|
let size, opacity, twinkleDur;
|
|
if (roll < 0.78) {
|
|
size = 1 + Math.random() * 0.4; // mostly tiny
|
|
opacity = 0.18 + Math.random() * 0.22;
|
|
twinkleDur = 14 + Math.random() * 8;
|
|
} else if (roll < 0.95) {
|
|
size = 1.4 + Math.random() * 0.6;
|
|
opacity = 0.32 + Math.random() * 0.22;
|
|
twinkleDur = 10 + Math.random() * 6;
|
|
} else {
|
|
size = 1.8 + Math.random() * 0.8;
|
|
opacity = 0.45 + Math.random() * 0.25;
|
|
twinkleDur = 8 + Math.random() * 5;
|
|
}
|
|
|
|
s.style.width = size + 'px';
|
|
s.style.height = size + 'px';
|
|
s.style.left = Math.random() * 100 + '%';
|
|
s.style.top = Math.random() * 100 + '%';
|
|
s.style.opacity = opacity;
|
|
s.style.setProperty('--twinkle-duration', twinkleDur + 's');
|
|
s.style.setProperty('--twinkle-delay', (Math.random() * twinkleDur) + 's');
|
|
|
|
frag.appendChild(s);
|
|
}
|
|
container.appendChild(frag);
|
|
})();
|
|
|
|
// Rotating word: constrained → compromised → captured
|
|
(function rotateWord() {
|
|
const el = document.getElementById('rot');
|
|
if (!el) return;
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|
el.textContent = 'captured';
|
|
return;
|
|
}
|
|
|
|
const words = ['captured', 'compromised', 'constrained'];
|
|
let i = 0;
|
|
|
|
setInterval(() => {
|
|
el.style.opacity = '0';
|
|
setTimeout(() => {
|
|
i = (i + 1) % words.length;
|
|
el.textContent = words[i];
|
|
el.style.opacity = '1';
|
|
}, 550);
|
|
}, 4200);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|