TryCF Gist

trycf-gist-1776715845617-6ce985ad-4580-e617-09ea-cea95d3c1880.cfm

<cfsavecontent variable="goodbye">
    
    <svg
  viewBox="0 0 1200 700"
  xmlns="http://www.w3.org/2000/svg"
  role="img"
  aria-label="Goodbye old TryCF, Hello new TryCF"
  width="100%"
  height="100vh"
  preserveAspectRatio="xMidYMid meet"
>
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0f141a"/>
      <stop offset="100%" stop-color="#070a0f"/>
    </linearGradient>

    <radialGradient id="glowWarm" cx="50%" cy="42%" r="55%">
      <stop offset="0%" stop-color="#f0ad4e" stop-opacity="0.14"/>
      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
    </radialGradient>

    <radialGradient id="glowCool" cx="50%" cy="68%" r="45%">
      <stop offset="0%" stop-color="#9cdcfe" stop-opacity="0.08"/>
      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
    </radialGradient>

    <filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="7"/>
    </filter>

    <style>
      .ui {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      .goodbye {
        font-size: 76px;
        font-weight: 800;
        fill: #f3f6f9;
        letter-spacing: -1.5px;
        opacity: 0;
        animation: goodbyeSequence 7.5s ease-in-out forwards;
        transform-origin: 600px 300px;
      }

      .goodbyeSub {
        font-size: 22px;
        font-weight: 500;
        letter-spacing: 1.5px;
        fill: #c3d0dc;
        opacity: 0;
        animation: goodbyeSubSequence 7.5s ease-in-out forwards;
      }

      .thanks {
        font-size: 20px;
        fill: #8ea3b7;
        opacity: 0;
        animation: thanksIn 7.5s ease-in-out forwards;
      }

      .hello {
        font-size: 62px;
        font-weight: 800;
        fill: #f3f6f9;
        letter-spacing: -1.2px;
        opacity: 0;
        animation: helloIn 7.5s ease-in-out forwards;
      }

      .helloSub {
        font-size: 22px;
        fill: #f7c56b;
        opacity: 0;
        animation: helloSubIn 7.5s ease-in-out forwards;
        cursor: pointer;
        text-decoration: underline;
      }

      .underline {
        opacity: 0;
        animation: helloSubIn 7.5s ease-in-out forwards;
      }

      .p1 { animation: drift1 10s ease-in-out infinite; }
      .p2 { animation: drift2 12s ease-in-out infinite; }
      .p3 { animation: drift3 9s ease-in-out infinite; }
      .p4 { animation: drift4 11s ease-in-out infinite; }

      @keyframes goodbyeSequence {
        0%   { opacity: 0; transform: translateY(18px) scale(0.96); }
        10%  { opacity: 1; transform: translateY(0) scale(1); }
        45%  { opacity: 1; transform: translateY(0) scale(1); }
        72%  { opacity: 0.92; transform: translateY(-16px) scale(0.9); }
        100% { opacity: 0.18; transform: translateY(-58px) scale(0.68); }
      }

      @keyframes goodbyeSubSequence {
        0%   { opacity: 0; transform: translateY(10px); }
        12%  { opacity: 0.95; transform: translateY(0); }
        42%  { opacity: 0.95; transform: translateY(0); }
        72%  { opacity: 0.45; transform: translateY(-10px); }
        100% { opacity: 0; transform: translateY(-28px); }
      }

      @keyframes thanksIn {
        0%, 52% { opacity: 0; transform: translateY(12px); }
        72%     { opacity: 0.95; transform: translateY(0); }
        100%    { opacity: 0.95; transform: translateY(0); }
      }

      @keyframes helloIn {
        0%, 56% { opacity: 0; transform: translateY(22px) scale(0.98); }
        76%     { opacity: 0.72; transform: translateY(8px) scale(0.995); }
        100%    { opacity: 1; transform: translateY(0) scale(1); }
      }

      @keyframes helloSubIn {
        0%, 66% { opacity: 0; transform: translateY(14px); }
        100%    { opacity: 1; transform: translateY(0); }
      }

      @keyframes drift1 {
        0%,100% { transform: translateY(0); opacity: 0.16; }
        50% { transform: translateY(-18px); opacity: 0.35; }
      }
      @keyframes drift2 {
        0%,100% { transform: translateY(0); opacity: 0.12; }
        50% { transform: translateY(-28px); opacity: 0.28; }
      }
      @keyframes drift3 {
        0%,100% { transform: translateY(0); opacity: 0.14; }
        50% { transform: translateY(-14px); opacity: 0.24; }
      }
      @keyframes drift4 {
        0%,100% { transform: translateY(0); opacity: 0.1; }
        50% { transform: translateY(-22px); opacity: 0.22; }
      }
    </style>
  </defs>

  <rect width="1200" height="700" fill="url(#bg)" />
  <circle cx="600" cy="290" r="360" fill="url(#glowWarm)" filter="url(#softGlow)" />
  <circle cx="600" cy="520" r="280" fill="url(#glowCool)" filter="url(#softGlow)" />

  <!-- particles -->
  <circle class="p1" cx="270" cy="540" r="3" fill="#f0ad4e"/>
  <circle class="p2" cx="930" cy="560" r="2.5" fill="#f7c56b"/>
  <circle class="p3" cx="760" cy="500" r="2.5" fill="#9cdcfe"/>
  <circle class="p4" cx="470" cy="575" r="2" fill="#d98b4d"/>

  <g text-anchor="middle" class="ui">
    <text x="600" y="230" class="goodbyeSub">
      Thank you for everything you made possible
    </text>

    <text x="600" y="320" class="goodbye">
      Goodbye old TryCF
    </text>

    <text x="600" y="445" class="thanks">
      And now, something new
    </text>

    <text x="600" y="525" class="hello">
      Hello new TryCF
    </text>

    <rect x="425" y="545" width="350" height="2" rx="1" fill="#f0ad4e" class="underline"/>

    <!-- CLICKABLE LINK -->
    <a href="https://beta.trycf.com" target="_blank">
      <text x="600" y="595" class="helloSub">
        beta.trycf.com
      </text>
    </a>
  </g>
</svg>
<style>
  html, body {
    margin: 0;
    height: 100%;
    background: #000;
  }
</style>

</cfsavecontent>






<cfscript>
    say = (msg) => writeOutput(msg);
    
    say(goodbye);
</cfscript>