Encrypted Text Reveal

This transition creates a sense of mystery and anticipation, mimicking the look of data being decoded in real time.

View Animation Live

Setup Guide

Get the

Encrypted Text Reveal

live on your website in just a few clicks

Copy code

Add custom Javascript to before </body>

Javascript

<script>
(() => {
  
  // -------------------------
  // Global Defaults
  // -------------------------
  const DEFAULTS = {
    trigger: "view",
    once: true,
    threshold: 0.35,

    duration: 900,
    speed: 18,
    jitter: 2,
    changeProb: 0.45,
    ease: "easeOutCubic",

    // Currency + numbers + "reverse N-ish" (И/Ɲ/Ŋ)
    charset: "0123456789$€£¥₩₱₹₦₴₫₲₡₿¢ИƝŊ#%&*@!?/\\|+=-_:;.,",
    tolerance: 1.0,

    randomOrder: true
  };

  // -------------------------
  // Easing
  // -------------------------
  const EASE = {
    linear: (t) => t,
    easeOutCubic: (t) => 1 - Math.pow(1 - t, 3),
    easeInOutCubic: (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2),
    easeOutQuart: (t) => 1 - Math.pow(1 - t, 4),
  };

  // -------------------------
  // Helpers
  // -------------------------
  const pickFrom = (arr) => arr[(Math.random() * arr.length) | 0];

  function shuffle(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
      const j = (Math.random() * (i + 1)) | 0;
      [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr;
  }

  const attr = (el, name, fallback) => {
    const v = el.getAttribute(name);
    return (v === null || v === undefined || v === "") ? fallback : v;
  };
  const numAttr = (el, name, fallback) => {
    const v = parseFloat(attr(el, name, fallback));
    return Number.isFinite(v) ? v : fallback;
  };
  const intAttr = (el, name, fallback) => {
    const v = parseInt(attr(el, name, fallback), 10);
    return Number.isFinite(v) ? v : fallback;
  };
  const boolAttr = (el, name, fallback) => {
    const v = attr(el, name, fallback ? "true" : "false").toLowerCase();
    return v === "true" || v === "1" || v === "yes";
  };

  // -------------------------
  // Layer Setup (ghost + live)
  // -------------------------
  function ensureLayers(el) {
    if (el.__encryptInit) return;

    const finalText = (el.getAttribute("data-encrypt-text") || el.textContent || "").toString();

    // Clear original content
    el.textContent = "";

    const ghost = document.createElement("span");
    ghost.className = "encrypt-ghost";
    ghost.textContent = finalText;

    const live = document.createElement("span");
    live.className = "encrypt-live";
    live.setAttribute("aria-hidden", "true");
    live.textContent = finalText;

    el.appendChild(ghost);
    el.appendChild(live);

    el.__encryptFinal = finalText;
    el.__encryptGhost = ghost;
    el.__encryptLive = live;
    el.__encryptInit = true;
  }

  // -------------------------
  // Width-matched scrambling
  // -------------------------
  function measureCharWidth(el, ch) {
    const meas = document.createElement("span");
    const cs = getComputedStyle(el);

    meas.style.position = "absolute";
    meas.style.visibility = "hidden";
    meas.style.whiteSpace = "pre";
    meas.style.font = cs.font;
    meas.style.letterSpacing = cs.letterSpacing;
    meas.style.textTransform = cs.textTransform;
    meas.textContent = ch;

    document.body.appendChild(meas);
    const w = meas.getBoundingClientRect().width;
    meas.remove();
    return w;
  }

  function buildWidthBuckets(el, charset, finalStr, tolerancePx) {
    const chars = Array.from(new Set(charset.split("")));
    const charW = new Map();
    chars.forEach((c) => charW.set(c, measureCharWidth(el, c)));

    const buckets = [];
    for (let i = 0; i < finalStr.length; i++) {
      const target = finalStr[i];

      // preserve whitespace
      if (target === " " || target === "\n" || target === "\t") {
        buckets[i] = [" "];
        continue;
      }

      const targetW = measureCharWidth(el, target);
      const candidates = chars.filter((c) => Math.abs(charW.get(c) - targetW) <= tolerancePx);

      // fallback if none match closely
      buckets[i] = candidates.length ? candidates : chars;
    }
    return buckets;
  }

  // -------------------------
  // Main Animation (random reveal + organic scramble)
  // -------------------------
  function runEncrypt(el) {
    ensureLayers(el);

    const duration    = intAttr(el, "data-encrypt-duration", DEFAULTS.duration);
    const speed       = intAttr(el, "data-encrypt-speed", DEFAULTS.speed);
    const jitter      = Math.max(1, intAttr(el, "data-encrypt-jitter", DEFAULTS.jitter));
    const changeProb  = numAttr(el, "data-encrypt-change", DEFAULTS.changeProb);
    const easeName    = attr(el, "data-encrypt-ease", DEFAULTS.ease);
    const charset     = attr(el, "data-encrypt-charset", DEFAULTS.charset);
    const tolerance   = numAttr(el, "data-encrypt-tolerance", DEFAULTS.tolerance);
    const randomOrder = boolAttr(el, "data-encrypt-random", DEFAULTS.randomOrder);

    const easeFn = EASE[easeName] || EASE.easeOutCubic;

    const finalStr = el.__encryptFinal;
    const live = el.__encryptLive;

    // Cancel any running animation for this element
    if (el.__encryptRAF) cancelAnimationFrame(el.__encryptRAF);

    // Build width-matched buckets once per run
    const buckets = buildWidthBuckets(el, charset, finalStr, tolerance);

    // Indices to animate (skip whitespace)
    const animIdx = [];
    for (let i = 0; i < finalStr.length; i++) {
      const ch = finalStr[i];
      if (ch !== " " && ch !== "\n" && ch !== "\t") animIdx.push(i);
    }

    // Random reveal order (shuffled once per run)
    const order = randomOrder ? shuffle(animIdx.slice()) : animIdx.slice();

    // Locked indices
    const locked = new Set();

    // Current random char per position
    const currentRand = new Array(finalStr.length).fill("");

    const start = performance.now();
    let lastTick = 0;
    let tickCount = 0;

    const tick = (t) => {
      const raw = Math.min(1, (t - start) / duration);
      const eased = easeFn(raw);

      if (t - lastTick >= speed) {
        lastTick = t;
        tickCount++;

        // Lock count based on eased progress
        const targetLockedCount = Math.floor(eased * order.length);

        // Lock new chars in reveal order
        for (let k = locked.size; k < targetLockedCount; k++) {
          const idx = order[k];
          if (idx != null) locked.add(idx);
        }

        let out = "";
        for (let i = 0; i < finalStr.length; i++) {
          const ch = finalStr[i];

          // whitespace stays exact
          if (ch === " " || ch === "\n" || ch === "\t") {
            out += ch;
            continue;
          }

          // locked => final character
          if (locked.has(i)) {
            out += ch;
            continue;
          }

          // unlocked => organic randomization (not synchronized)
          const shouldChange =
            !currentRand[i] ||
            (tickCount % jitter === 0) ||
            (Math.random() < changeProb);

          if (shouldChange) currentRand[i] = pickFrom(buckets[i]);
          out += currentRand[i];
        }

        live.textContent = out;

        if (raw >= 1) {
          live.textContent = finalStr;
          return;
        }
      }

      el.__encryptRAF = requestAnimationFrame(tick);
    };

    el.__encryptRAF = requestAnimationFrame(tick);
  }

  // -------------------------
  // Binding / Triggers (multi-instance safe)
  // -------------------------
  function bind(el) {
    ensureLayers(el);

    const trigger = attr(el, "data-encrypt-trigger", DEFAULTS.trigger).toLowerCase();

    if (trigger === "hover") {
      const go = () => runEncrypt(el);
      el.addEventListener("mouseenter", go);
      el.addEventListener("focus", go);
      return;
    }

    if (trigger === "load") {
      runEncrypt(el);
      return;
    }

    // default: view
    const once = boolAttr(el, "data-encrypt-once", DEFAULTS.once);
    const threshold = numAttr(el, "data-encrypt-threshold", DEFAULTS.threshold);

    const io = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return;
        runEncrypt(entry.target);
        if (once) io.unobserve(entry.target);
      });
    }, { threshold });

    io.observe(el);
  }

  document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll("[data-encrypt]").forEach(bind);
  });
})();
</script>

Add custom CSS to inside </head> tag

CSS

<style>
[data-encrypt]{
  position: relative;
  display: inline-block; /* change to block if you want full-width headings */
}

[data-encrypt] .encrypt-ghost{
  visibility: hidden;
  white-space: pre-wrap;
}

[data-encrypt] .encrypt-live{
  position: absolute;
  inset: 0;
  white-space: pre-wrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
</style>

All Done! Your Interaction is now ready to go live

View Animation Live

Mastering the Encrypted Text Reveal Component

This component creates a clean “scramble-to-final” text reveal that preserves layout stability by stacking a hidden ghost layer behind an animated live layer. It supports three triggers (view, hover, load) and is safe to duplicate across the page (multi-instance friendly).

How it Works

Each element with data-encrypt gets rebuilt into two stacked spans: .encrypt-ghost (hidden but occupies space) and .encrypt-live (absolutely positioned overlay that animates). During animation, characters are swapped using a width-matched “bucket” per character position to minimize width jitter and keep the final line length consistent.

Script Customization Options

The script uses global defaults (in DEFAULTS) and optional per-element attributes. Use the table below to tune motion, reveal behavior, and scrambling stability.

Variable / Attribute	Function	Default Value	Practical Adjustment Tip
data-encrypt-trigger	Defines when the animation starts: view, hover, or load.	"view"	Use hover for interactive headings, or load for above-the-fold hero text.
data-encrypt-once	For view only: whether it runs once and then stops observing.	true	Set to false if you want it to re-run whenever the element re-enters the viewport.
data-encrypt-threshold	IntersectionObserver threshold (0–1): how much of the element must be visible before triggering.	0.35	Lower to 0.15 to start sooner; raise to 0.6 for a more deliberate reveal.
data-encrypt-text	Overrides the final text. If not set, uses the element’s original text content.	(element text)	Use this when the element is CMS-driven but you need a consistent final headline across variants.
data-encrypt-duration	Total reveal time in milliseconds (progress mapped via easing).	900	For premium hero moments, try 1200–1600. For snappy UI labels, try 500–700.
data-encrypt-speed	Update tick interval in milliseconds (how often characters refresh).	18	Lower = more updates (smoother but heavier). Increase to 24–30 to reduce CPU on long paragraphs.
data-encrypt-jitter	Controls stability: random characters are allowed to “hold” for N ticks before changing (reduces flicker).	2	Increase to 3–5 for smoother, less chaotic scrambling (especially on large type).
data-encrypt-change	Probability (0–1) an unlocked character changes on a tick (adds organic randomness).	0.45	Raise to 0.6 for “chaos”; lower to 0.25–0.35 for calmer, more legible motion.
data-encrypt-ease	Easing curve name: linear, easeOutCubic, easeInOutCubic, easeOutQuart.	"easeOutCubic"	Use easeInOutCubic for a more “designed” ramp-up/ramp-down feel in hero text.
data-encrypt-charset	Characters used during scrambling (the pool to pick from).	"0123…., "	Keep this tight and visually consistent. For the most stable look, avoid mixing very wide letters with thin punctuation.
data-encrypt-tolerance	Width tolerance (px) when matching scramble characters to each final character’s measured width.	1.0	If you still see slight width shifting, increase to 1.5–2.0. If buckets feel too “random,” lower to 0.6–0.8.
data-encrypt-random	Whether reveal order is randomized per run (instead of left-to-right).	true	Set to false for a predictable, editorial left-to-right reveal (useful for product UI).

Webflow Styling Requirements

The component relies on a specific layering model. The table below shows the minimum Webflow Style Panel settings you must apply (or avoid) for reliable output.

Target	Style Panel Property	Required Setting	Why it Matters
Element with data-encrypt	Position	Relative	The animated .encrypt-live layer is absolutely positioned and needs a stable containing block.
Element with data-encrypt	Display	Inline-block (or Block if full-width)	Inline-block preserves natural text sizing and prevents unexpected line breaks. Switch to block for full-width headings.
Element with data-encrypt	Padding	Avoid internal padding	The overlay uses inset: 0. Padding can cause the ghost/live layers to misalign or clip.
Element with data-encrypt	Typography	Style normally in Webflow	The script measures actual rendered glyph widths. Font family, weight, letter spacing, and transform directly affect stability.
Element with data-encrypt	Overflow	Visible (recommended)	If you set overflow hidden while using tight line-heights, descenders can clip during scrambling.
Ghost span .encrypt-ghost	Visibility	Hidden	Keeps layout space without showing duplicate text. This is what prevents layout “jumping.”
Live span .encrypt-live	Position	Absolute + Inset: 0	Ensures the animated layer perfectly overlays the ghost layer (same bounding box).
Live span .encrypt-live	Pointer Events	None	Prevents the overlay from blocking hover/click interactions on the parent element.
Text wrapping	White Space	Pre-wrap	Preserves line breaks and spacing for multi-line headings or text blocks while maintaining layout stability.
Numbers	Font Variant Numeric	Tabular-nums	Stabilizes number widths during scrambling, reducing perceived jitter when digits appear in the final text.

Critical Usage Rules

Follow these constraints to ensure consistent behavior across browsers and responsive breakpoints.

Do not nest rich inline HTML inside the encrypted element: The script replaces the element’s contents and rebuilds it as two spans. Use plain text only inside [data-encrypt].
Avoid padding on the encrypted element: Because .encrypt-live uses inset: 0, internal padding can cause the overlay and ghost to misalign. Use margin on the element or padding on a parent wrapper instead.
Font loading matters (especially for width matching): If your typeface loads late, measured widths can change. Ensure your Webflow fonts are properly configured and not blocked by performance scripts. If you see a first-run mismatch, consider triggering on view (not load) so fonts are more likely ready by the time it animates.
Responsive typography is supported, but plan for multi-line text: Both layers use white-space: pre-wrap. If your heading wraps differently per breakpoint, the overlay will still match, but extremely tight line-height can clip glyphs.
Use sensible line-height: Avoid ultra-tight line-height values. A line-height around 1.1–1.35 keeps descenders safe during scrambling.
Keep character sets visually coherent: The width buckets work best when your charset contains characters with similar visual weight. If you add many very thin or very wide characters, you may need to tune data-encrypt-tolerance.
Hover trigger needs a “hoverable” element: If you use data-encrypt-trigger="hover", ensure the target is not covered by another layer and that it can receive mouseenter/focus events.
Multiple instances are safe, but avoid duplicate IDs: You can place data-encrypt on many elements. Keep your Webflow structure clean and avoid conflicting custom scripts that rewrite the same element.

Pro Tip: For the highest-end feel on large headings, start with data-encrypt-jitter="3" and data-encrypt-change="0.30". This reduces flicker and keeps characters readable while still feeling “alive.”

Copy Figma (Optional)

Copy the Component Code

Component Code (Next JS 15.2.9)

Copy the Styles

CSS Code

Using the Motion Component

Component Code

All Done! Your Interaction is now ready to go live

View Animation Live

<meta charset='utf-8'><html><head><meta charset="utf-8"></head><body><div><span data-metadata=""></span><span data-buffer=""></span></div><span style="font-size: 18px; white-space: pre-wrap;">ENCRYPTED TEXT REVEAL</span><br><span style="font-weight: bold; font-size: 24px; white-space: pre-wrap;">Designing intelligent digital experiences that drive engagement and impact. Purpose-driven digital experiences designed to empower organizations and users.</span><br><span style="font-weight: bold; font-size: 24px; white-space: pre-wrap;">This transition creates a sense of mystery and anticipation, mimicking the look of data being decoded in real time.</span><br><span style="font-size: 20px; white-space: pre-wrap;">Copy this component into your project!</span><br><span style="font-size: 18px; white-space: pre-wrap;">Category</span><br><span style="font-size: 18px; white-space: pre-wrap;">Navigation</span><br><span style="font-size: 18px; white-space: pre-wrap;">Need help?</span><br><span style="font-weight: bold; font-size: 18px; white-space: pre-wrap;">Join Slack</span></body></html>

const wfO={"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"4c6f5dce-ee13-10ce-f8f3-78aa8b4e8cb5","type":"Block","tag":"section","classes":["f5b50750-c251-ed08-4f6a-121792217d63"],"children":["b9c93f86-640e-7a2b-d46e-1d926e313933"],"data":{"text":false,"tag":"section","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b9c93f86-640e-7a2b-d46e-1d926e313933","type":"Block","tag":"div","classes":["08f89188-d320-87e1-e606-191cf3884e1e"],"children":["d60a91e2-e30a-2f3e-110a-cfd26a355d53"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d60a91e2-e30a-2f3e-110a-cfd26a355d53","type":"Block","tag":"div","classes":["07815991-952a-8d98-0e00-e4c25af2710d","d854acdc-e1f1-3b5b-b6b7-6ce5b902409f"],"children":["4397f4ef-3bad-fe66-f463-e1aed978700d"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"4397f4ef-3bad-fe66-f463-e1aed978700d","type":"Block","tag":"div","classes":["07815991-952a-8d98-0e00-e4c25af27147"],"children":["caf774c3-fb21-3c7f-9180-eb5babe5f4d9"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"caf774c3-fb21-3c7f-9180-eb5babe5f4d9","type":"Block","tag":"div","classes":["9b90c505-ac75-bee4-5a4a-675ad52d1bf4"],"children":["01b7a05d-27d4-1b54-eb83-96c9c662af19","47d53731-c4ca-fcff-a274-f057e0380fb8","2d402bb5-d1ba-bb40-67c1-def73ab9a72a"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"01b7a05d-27d4-1b54-eb83-96c9c662af19","type":"Block","tag":"div","classes":["c1e7febb-5cfa-e610-ca61-b171c27cdb6f"],"children":["a6d82b3d-b245-36e2-c23a-ca4b362a0714"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"a6d82b3d-b245-36e2-c23a-ca4b362a0714","type":"Block","tag":"div","classes":[],"children":["4acec912-2466-e27c-9193-3a1010c4a552"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"4acec912-2466-e27c-9193-3a1010c4a552","text":true,"v":"ENCRYPTED TEXT REVEAL"},{"_id":"47d53731-c4ca-fcff-a274-f057e0380fb8","type":"Block","tag":"div","classes":["2c41c3b0-2934-e7c8-9a69-ef03cdc1ac2d"],"children":["b3e385a7-b352-6e2a-feac-b50ca0ff491f"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b3e385a7-b352-6e2a-feac-b50ca0ff491f","type":"Heading","tag":"h1","classes":["5a532cf7-b5a3-72c3-61de-017d94830274"],"children":["8b7901cc-e53c-6684-5aa4-6849cc1bba5c"],"data":{"tag":"h1","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"data-encrypt","value":""},{"name":"data-encrypt-trigger","value":"view"},{"name":"data-encrypt-duration","value":"1200"},{"name":"data-encrypt-jitter","value":"3"},{"name":"data-encrypt-ease","value":"easeInOutCubic"},{"name":"data-encrypt-speed","value":"16"},{"name":"data-encrypt-charset","value":"ABCDEFGHIJKLMNPQRSTUVWXYZ0123456789"},{"name":"data-encrypt-random","value":"true"},{"name":"data-encrypt-change","value":"0.55"}],"search":{"exclude":false},"visibility":{"conditions":[]},"editable":false}},{"_id":"8b7901cc-e53c-6684-5aa4-6849cc1bba5c","text":true,"v":"ENCRYPTED TEXT REVEAL ANIMATION"},{"_id":"2d402bb5-d1ba-bb40-67c1-def73ab9a72a","type":"Block","tag":"div","classes":["0c37a615-31e9-c937-54a9-bef4a64fb8ca"],"children":["444ecfdd-3f54-a5a8-7f72-c0e7d14cc39d"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"444ecfdd-3f54-a5a8-7f72-c0e7d14cc39d","type":"Paragraph","tag":"p","classes":["07815991-952a-8d98-0e00-e4c25af2715c"],"children":["61931fa2-b022-69ef-5d89-dbfcfd3bee74"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"61931fa2-b022-69ef-5d89-dbfcfd3bee74","text":true,"v":"This transition creates a sense of mystery and anticipation, mimicking the look of data being decoded in real time."}],"styles":[{"_id":"f5b50750-c251-ed08-4f6a-121792217d63","fake":false,"type":"class","name":"section-encrypt","namespace":"","comb":"","styleLess":"position: relative; z-index: 2; display: flex; min-height: 100svh; padding-top: 1.88rem; padding-right: 1.88rem; padding-bottom: 1.88rem; padding-left: 1.88rem; flex-direction: row; justify-content: center; flex-wrap: nowrap; align-items: stretch;","variants":{"tiny":{"styleLess":"padding-top: 1.5rem; padding-right: 1.5rem; padding-bottom: 1.5rem; padding-left: 1.5rem;"}},"children":[],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"08f89188-d320-87e1-e606-191cf3884e1e","fake":false,"type":"class","name":"contain-curved","namespace":"","comb":"","styleLess":"display: flex; width: 100%; justify-content: center; align-items: center; border-top-left-radius: 1.88rem; border-top-right-radius: 1.88rem; border-bottom-left-radius: 1.88rem; border-bottom-right-radius: 1.88rem; background-color: #f6f6f6;","variants":{},"children":[],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"5a532cf7-b5a3-72c3-61de-017d94830274","fake":false,"type":"class","name":"text-90","namespace":"","comb":"","styleLess":"font-weight: 800; letter-spacing: -0.02em; font-size: @raw<|clamp(2.5rem, 10cqw, 5.63rem)|>;","variants":{},"children":["56bffe02-a08f-e089-4346-7c94a4249ea4","c609d4af-662e-d39f-c112-82fd2b1eafdf"],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"c1e7febb-5cfa-e610-ca61-b171c27cdb6f","fake":false,"type":"class","name":"subtitle-wrapper","namespace":"","comb":"","styleLess":"display: flex; justify-content: center; align-items: center; grid-column-gap: 0.75rem; grid-row-gap: 0.75rem;","variants":{},"children":[],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af27147","fake":false,"type":"class","name":"container-large","namespace":"","comb":"","styleLess":"width: 100%; max-width: 80rem; margin-right: auto; margin-left: auto;","variants":{},"children":["0dbd9017-e7ba-df7c-0f6d-0f6cd7614637"],"origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af2710d","fake":false,"type":"class","name":"padding-global","namespace":"","comb":"","styleLess":"padding-right: 2.5rem; padding-left: 2.5rem;","variants":{"small":{"styleLess":"padding-right: 1.25rem; padding-left: 1.25rem;"},"medium":{"styleLess":"padding-right: 1.5rem; padding-left: 1.5rem;"}},"children":["cf43d98c-48d8-bebc-6c99-10f0eb75fae1","1fb355cd-5f50-6d65-28fa-ad7b5128e100","d854acdc-e1f1-3b5b-b6b7-6ce5b902409f"],"origin":null,"selector":null},{"_id":"0c37a615-31e9-c937-54a9-bef4a64fb8ca","fake":false,"type":"class","name":"encrypted-par","namespace":"","comb":"","styleLess":"max-width: 49.56rem; text-wrap: @raw<|balance|>;","variants":{},"children":[],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"9b90c505-ac75-bee4-5a4a-675ad52d1bf4","fake":false,"type":"class","name":"heading-title","namespace":"","comb":"","styleLess":"display: flex; padding-top: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-left: 1rem; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; align-items: center; grid-column-gap: 1.5rem; grid-row-gap: 1.5rem; text-align: center;","variants":{},"children":["73bb322c-290f-9ad1-79ae-324e25226a44"],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"2c41c3b0-2934-e7c8-9a69-ef03cdc1ac2d","fake":false,"type":"class","name":"encrypted-heading","namespace":"","comb":"","styleLess":"max-width: 38rem; color: #6c4cf1; text-wrap: @raw<|balance|>;","variants":{},"children":[],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af2715c","fake":false,"type":"class","name":"text-size-medium","namespace":"","comb":"","styleLess":"font-size: 1.25rem;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"d854acdc-e1f1-3b5b-b6b7-6ce5b902409f","fake":false,"type":"class","name":"padding-section-small","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0,"codeComponentsRemovedCount":0}};