Skip to content

Instantly share code, notes, and snippets.

@simonw

simonw/rainbow.md Secret

Created November 3, 2024 20:30
Show Gist options
  • Save simonw/2e56ee84e7321592f79ceaed2e81b0a9 to your computer and use it in GitHub Desktop.
Save simonw/2e56ee84e7321592f79ceaed2e81b0a9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
rainbow.md

Pulsing Rainbow Border Effect

human (Nov 3, 2024, 09:31 AM)

Build an artifact - no react - that demonstrates a CSS animated border effect on a box where there is a pulsing rainbow thing going on

assistant (Nov 3, 2024, 09:31 AM)

This is a good case for an artifact as it's a complete, reusable piece of code that creates a visual effect and would benefit from being isolated. The animation code is substantial enough to warrant separation.

Animated Rainbow Border Effect

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background: #1a1a1a;
    }

    .rainbow-box {
      position: relative;
      width: 300px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #2a2a2a;
      border-radius: 10px;
      overflow: hidden;
    }

    .rainbow-box::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: conic-gradient(
        from 0deg,
        #ff0000,
        #ff8000,
        #ffff00,
        #00ff00,
        #00ffff,
        #0000ff,
        #8000ff,
        #ff0080,
        #ff0000
      );
      animation: rotate 4s linear infinite,
                pulse 2s ease-in-out infinite;
      z-index: -1;
    }

    .rainbow-box::after {
      content: '';
      position: absolute;
      inset: 4px;
      background: #2a2a2a;
      border-radius: 8px;
      z-index: -1;
    }

    .content {
      color: white;
      font-family: sans-serif;
      font-size: 24px;
      text-align: center;
    }

    @keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
      100% {
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div class="rainbow-box">
    <div class="content">Rainbow Border</div>
  </div>
</body>
</html>

I've created a box with an animated rainbow border effect that features:

  1. A rotating conic gradient that creates the rainbow effect
  2. A pulsing animation that makes the border fade in and out
  3. A clean inner container that masks the gradient except for the border area
  4. Dark theme with white text for contrast

The effect is achieved using several key techniques:

  • Using ::before pseudo-element with a conic gradient for the rainbow
  • Making the gradient element larger than the container and rotating it
  • Using ::after pseudo-element to create the inner mask
  • Combining rotation and opacity animations for the full effect

Would you like me to modify anything about the animation, such as:

  • Changing the speed of the rotation or pulse
  • Adjusting the colors in the gradient
  • Modifying the border width
  • Adding different animation effects?

human (Nov 3, 2024, 09:38 AM)

Add. Button to trigger the animation

assistant (Nov 3, 2024, 09:38 AM)

This is an update to the existing artifact, adding interactive control over the animation while maintaining the core visual effect. The addition is substantial enough to warrant keeping it as an artifact.

Animated Rainbow Border Effect with Controls

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      flex-direction: column;
      gap: 20px;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background: #1a1a1a;
    }

    .rainbow-box {
      position: relative;
      width: 300px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #2a2a2a;
      border-radius: 10px;
      overflow: hidden;
    }

    .rainbow-box::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: conic-gradient(
        from 0deg,
        #ff0000,
        #ff8000,
        #ffff00,
        #00ff00,
        #00ffff,
        #0000ff,
        #8000ff,
        #ff0080,
        #ff0000
      );
      z-index: -1;
    }

    .rainbow-box.animated::before {
      animation: rotate 4s linear infinite,
                pulse 2s ease-in-out infinite;
    }

    .rainbow-box::after {
      content: '';
      position: absolute;
      inset: 4px;
      background: #2a2a2a;
      border-radius: 8px;
      z-index: -1;
    }

    .content {
      color: white;
      font-family: sans-serif;
      font-size: 24px;
      text-align: center;
    }

    .toggle-button {
      padding: 12px 24px;
      font-size: 16px;
      color: white;
      background: #444;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .toggle-button:hover {
      background: #555;
    }

    .toggle-button:active {
      background: #333;
    }

    @keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
      100% {
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div class="rainbow-box">
    <div class="content">Rainbow Border</div>
  </div>
  <button class="toggle-button" onclick="toggleAnimation()">Toggle Animation</button>

  <script>
    function toggleAnimation() {
      const box = document.querySelector('.rainbow-box');
      box.classList.toggle('animated');
      
      const button = document.querySelector('.toggle-button');
      button.textContent = box.classList.contains('animated') ? 
        'Stop Animation' : 'Start Animation';
    }
  </script>
</body>
</html>

I've updated the design to include:

  1. A toggle button that starts/stops the animation
  2. Modified the CSS to only apply animations when the 'animated' class is present
  3. Added button styling that matches the dark theme
  4. Interactive button text that changes based on animation state

The key changes are:

  • Moved the animations to a separate 'animated' class
  • Added a simple JavaScript function to toggle the class
  • Styled the button to fit the aesthetic
  • Added hover and active states for better interactivity

Would you like me to modify anything about the controls or animation? I could:

  • Add more animation options
  • Change the button style
  • Adjust the timing
  • Add transition effects for starting/stopping

human (Nov 3, 2024, 09:39 AM)

I don't see it

assistant (Nov 3, 2024, 09:39 AM)

The animation should be visible in the HTML artifact I provided, but let me update it to make it more prominent and ensure it's working correctly.

This is an update to the existing artifact to make the rainbow border effect more visible and prominent, while maintaining the core functionality.

Enhanced Animated Rainbow Border Effect

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      flex-direction: column;
      gap: 20px;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background: #1a1a1a;
    }

    .rainbow-box {
      position: relative;
      width: 300px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #2a2a2a;
      border-radius: 10px;
      /* Remove overflow hidden to allow glow effect */
    }

    .rainbow-box::before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      background: linear-gradient(
        45deg,
        #ff0000,
        #ff8000,
        #ffff00,
        #00ff00,
        #00ffff,
        #0000ff,
        #8000ff,
        #ff0080,
        #ff0000
      );
      border-radius: 15px;
      z-index: -1;
      /* Add blur for glow effect */
      filter: blur(10px);
    }

    .rainbow-box.animated::before {
      animation: rotate 3s linear infinite,
                pulse 2s ease-in-out infinite;
    }

    .rainbow-box::after {
      content: '';
      position: absolute;
      inset: 3px;
      background: #2a2a2a;
      border-radius: 8px;
      z-index: 0;
    }

    .content {
      color: white;
      font-family: system-ui, sans-serif;
      font-size: 24px;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .toggle-button {
      padding: 12px 24px;
      font-size: 16px;
      color: white;
      background: #444;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .toggle-button:hover {
      background: #555;
      transform: translateY(-2px);
    }

    .toggle-button:active {
      background: #333;
      transform: translateY(0px);
    }

    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse {
      0% {
        opacity: 1;
        filter: blur(10px) brightness(1.2);
      }
      50% {
        opacity: 0.8;
        filter: blur(8px) brightness(1);
      }
      100% {
        opacity: 1;
        filter: blur(10px) brightness(1.2);
      }
    }
  </style>
</head>
<body>
  <div class="rainbow-box animated">
    <div class="content">Rainbow Border</div>
  </div>
  <button class="toggle-button" onclick="toggleAnimation()">Stop Animation</button>

  <script>
    function toggleAnimation() {
      const box = document.querySelector('.rainbow-box');
      box.classList.toggle('animated');
      
      const button = document.querySelector('.toggle-button');
      button.textContent = box.classList.contains('animated') ? 
        'Stop Animation' : 'Start Animation';
    }
  </script>
</body>
</html>

Key changes I've made to make the effect more visible:

  1. Added a blur filter to create a glowing effect
  2. Removed the overflow: hidden to allow the glow to extend beyond the box
  3. Changed from conic-gradient to linear-gradient for smoother animation
  4. Increased the size of the rainbow border
  5. Made the animation start automatically (added 'animated' class by default)
  6. Adjusted the animation timing and opacity values
  7. Enhanced the pulse animation with brightness variation

The rainbow border should now be much more visible with a glowing effect that animates and pulses. Let me know if you'd like me to:

  • Make the effect even more prominent
  • Adjust the colors or timing
  • Change the glow intensity
  • Modify any other aspects of the animation

human (Nov 3, 2024, 09:40 AM)

When it isn't spinning it looks good - I want the animation bit to just affect which colors are where in the gradient not actually spin

assistant (Nov 3, 2024, 09:40 AM)

Ah, I understand! Let's modify the animation to shift the colors through the gradient without rotating the entire border.

This is an update to the existing artifact to change the animation style from rotation to gradient color shifting, while maintaining the clean border effect.

Color Shifting Rainbow Border Effect

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      flex-direction: column;
      gap: 20px;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background: #1a1a1a;
    }

    .rainbow-box {
      position: relative;
      width: 300px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #2a2a2a;
      border-radius: 10px;
    }

    .rainbow-box::before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      background: linear-gradient(
        45deg,
        #ff0000,
        #ff8000,
        #ffff00,
        #00ff00,
        #00ffff,
        #0000ff,
        #8000ff,
        #ff0080,
        #ff0000
      );
      background-size: 200% 200%;
      border-radius: 15px;
      z-index: -1;
      filter: blur(10px);
    }

    .rainbow-box.animated::before {
      animation: gradient 3s ease infinite,
                pulse 2s ease-in-out infinite;
    }

    .rainbow-box::after {
      content: '';
      position: absolute;
      inset: 3px;
      background: #2a2a2a;
      border-radius: 8px;
      z-index: 0;
    }

    .content {
      color: white;
      font-family: system-ui, sans-serif;
      font-size: 24px;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .toggle-button {
      padding: 12px 24px;
      font-size: 16px;
      color: white;
      background: #444;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .toggle-button:hover {
      background: #555;
      transform: translateY(-2px);
    }

    .toggle-button:active {
      background: #333;
      transform: translateY(0px);
    }

    @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    @keyframes pulse {
      0% {
        opacity: 1;
        filter: blur(10px) brightness(1.2);
      }
      50% {
        opacity: 0.8;
        filter: blur(8px) brightness(1);
      }
      100% {
        opacity: 1;
        filter: blur(10px) brightness(1.2);
      }
    }
  </style>
</head>
<body>
  <div class="rainbow-box animated">
    <div class="content">Rainbow Border</div>
  </div>
  <button class="toggle-button" onclick="toggleAnimation()">Stop Animation</button>

  <script>
    function toggleAnimation() {
      const box = document.querySelector('.rainbow-box');
      box.classList.toggle('animated');
      
      const button = document.querySelector('.toggle-button');
      button.textContent = box.classList.contains('animated') ? 
        'Stop Animation' : 'Start Animation';
    }
  </script>
</body>
</html>

Key changes:

  1. Removed the rotation animation
  2. Added a gradient animation that shifts the colors using background-position
  3. Set background-size: 200% 200% to allow for smooth gradient movement
  4. Kept the pulse effect for the glow
  5. The gradient now flows smoothly without rotating the entire border

The animation should now shift the colors through the gradient while maintaining the border's position. Would you like me to:

  • Adjust the animation speed
  • Modify the gradient direction
  • Change the color sequence
  • Adjust the glow intensity

human (Nov 3, 2024, 09:41 AM)

Great - make it faster and have the border be a bit more narrow

assistant (Nov 3, 2024, 09:41 AM)

This is an update to the existing artifact to speed up the animation and make the border more refined by adjusting its size and blur values.

Refined Color Shifting Rainbow Border Effect

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      flex-direction: column;
      gap: 20px;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background: #1a1a1a;
    }

    .rainbow-box {
      position: relative;
      width: 300px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #2a2a2a;
      border-radius: 10px;
    }

    .rainbow-box::before {
      content: '';
      position: absolute;
      /* Reduced the spread of the border */
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      background: linear-gradient(
        45deg,
        #ff0000,
        #ff8000,
        #ffff00,
        #00ff00,
        #00ffff,
        #0000ff,
        #8000ff,
        #ff0080,
        #ff0000
      );
      background-size: 200% 200%;
      border-radius: 12px;
      z-index: -1;
      /* Reduced blur for sharper border */
      filter: blur(6px);
    }

    .rainbow-box.animated::before {
      /* Increased animation speed */
      animation: gradient 1.5s ease infinite,
                pulse 2s ease-in-out infinite;
    }

    .rainbow-box::after {
      content: '';
      position: absolute;
      /* Adjusted inner spacing to match smaller border */
      inset: 2px;
      background: #2a2a2a;
      border-radius: 8px;
      z-index: 0;
    }

    .content {
      color: white;
      font-family: system-ui, sans-serif;
      font-size: 24px;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .toggle-button {
      padding: 12px 24px;
      font-size: 16px;
      color: white;
      background: #444;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .toggle-button:hover {
      background: #555;
      transform: translateY(-2px);
    }

    .toggle-button:active {
      background: #333;
      transform: translateY(0px);
    }

    @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    @keyframes pulse {
      0% {
        opacity: 1;
        filter: blur(6px) brightness(1.2);
      }
      50% {
        opacity: 0.8;
        filter: blur(5px) brightness(1);
      }
      100% {
        opacity: 1;
        filter: blur(6px) brightness(1.2);
      }
    }
  </style>
</head>
<body>
  <div class="rainbow-box animated">
    <div class="content">Rainbow Border</div>
  </div>
  <button class="toggle-button" onclick="toggleAnimation()">Stop Animation</button>

  <script>
    function toggleAnimation() {
      const box = document.querySelector('.rainbow-box');
      box.classList.toggle('animated');
      
      const button = document.querySelector('.toggle-button');
      button.textContent = box.classList.contains('animated') ? 
        'Stop Animation' : 'Start Animation';
    }
  </script>
</body>
</html>

Key changes:

  1. Reduced border width by changing the spread from -5px to -3px
  2. Decreased the blur filter from 10px to 6px for a sharper edge
  3. Sped up the gradient animation from 3s to 1.5s
  4. Adjusted the border radius to match the narrower border
  5. Updated the pulse animation blur values to maintain consistency
  6. Adjusted the inner spacing (inset) to match the new border size

The border should now be more refined and the colors should shift more quickly. Would you like me to:

  • Adjust the speed further
  • Make the border even narrower
  • Modify the blur intensity
  • Change any other aspects of the animation?

human (Nov 3, 2024, 09:43 AM)

Have the border not visible at all - which I click start it should expand to its width quickly and then animate, clicking again should have it animated disapear

assistant (Nov 3, 2024, 09:43 AM)

This is an update to add entrance/exit animations for the border while maintaining the color shifting effect. We'll use CSS transitions and transforms to create smooth scaling animations.

Animated Rainbow Border with Entrance/Exit Effects

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      flex-direction: column;
      gap: 20px;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background: #1a1a1a;
    }

    .rainbow-box {
      position: relative;
      width: 300px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #2a2a2a;
      border-radius: 10px;
    }

    .rainbow-box::before {
      content: '';
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      background: linear-gradient(
        45deg,
        #ff0000,
        #ff8000,
        #ffff00,
        #00ff00,
        #00ffff,
        #0000ff,
        #8000ff,
        #ff0080,
        #ff0000
      );
      background-size: 200% 200%;
      border-radius: 12px;
      z-index: -1;
      filter: blur(6px);
      opacity: 0;
      transform: scale(0.95);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .rainbow-box.animated::before {
      opacity: 1;
      transform: scale(1);
      animation: gradient 1.5s ease infinite,
                pulse 2s ease-in-out infinite;
    }

    .rainbow-box::after {
      content: '';
      position: absolute;
      inset: 2px;
      background: #2a2a2a;
      border-radius: 8px;
      z-index: 0;
    }

    .content {
      color: white;
      font-family: system-ui, sans-serif;
      font-size: 24px;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .toggle-button {
      padding: 12px 24px;
      font-size: 16px;
      color: white;
      background: #444;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .toggle-button:hover {
      background: #555;
      transform: translateY(-2px);
    }

    .toggle-button:active {
      background: #333;
      transform: translateY(0px);
    }

    @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    @keyframes pulse {
      0% {
        opacity: 1;
        filter: blur(6px) brightness(1.2);
      }
      50% {
        opacity: 0.8;
        filter: blur(5px) brightness(1);
      }
      100% {
        opacity: 1;
        filter: blur(6px) brightness(1.2);
      }
    }
  </style>
</head>
<body>
  <div class="rainbow-box">
    <div class="content">Rainbow Border</div>
  </div>
  <button class="toggle-button" onclick="toggleAnimation()">Start Animation</button>

  <script>
    function toggleAnimation() {
      const box = document.querySelector('.rainbow-box');
      const button = document.querySelector('.toggle-button');
      
      box.classList.toggle('animated');
      button.textContent = box.classList.contains('animated') ? 
        'Stop Animation' : 'Start Animation';
    }
  </script>
</body>
</html>

Key changes:

  1. Added initial state with opacity: 0 and scaled down slightly
  2. Added transition properties for smooth entrance/exit
  3. Modified the animated class to control both visibility and animations
  4. Used cubic-bezier timing function for more natural motion
  5. Removed the initial 'animated' class so the border starts hidden
  6. The border now smoothly scales and fades in/out when toggled

The border should now:

  1. Start completely hidden
  2. Smoothly expand and fade in when clicking Start
  3. Begin the color animation once visible
  4. Smoothly contract and fade out when clicking Stop

Would you like me to:

  • Adjust the entrance/exit timing
  • Modify the scaling effect
  • Change the transition easing
  • Adjust any other aspects of the animation?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment