ChatGPT's Youtube CTA Abomination

youtube-cta-abomination.jsx

/*
  Note from Nafeu: this was the generated code snippet from ChatGPT when asked
                   to create a youtube cta animation template.

  How to use:
    - use remotion: `npx create-video your-video-project-name`
    - select the blank template, no addons needed
    - install and run dev server: `cd your-video-project-name`, `npm i`, `npm run dev`
    - replace `Composition.tsx` with the following code
    - render and enjoy
*/

import React from 'react';
import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';

export const YouTubeCTA = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();

  // Animation springs
  const likeBounce = spring({
    frame,
    fps,
    from: 0,
    to: 1,
    durationInFrames: 20,
  });

  const subscribeSlide = spring({
    frame: frame - 10,
    fps,
    from: -300,
    to: 0,
    durationInFrames: 30,
  });

  const bellShake = spring({
    frame: frame - 40,
    fps,
    from: 0,
    to: 10,
    durationInFrames: 10,
  });

  return (
    <AbsoluteFill style={{backgroundColor: 'white', justifyContent: 'center', alignItems: 'center'}}>
      {/* Channel Image */}
      <div
        style={{
          position: 'absolute',
          top: '50%',
          left: '20%',
          transform: 'translate(-50%, -50%)',
        }}
      >
        <div
          style={{
            width: 80,
            height: 80,
            borderRadius: '50%',
            backgroundColor: 'gray', // Placeholder for channel image
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            fontSize: 20,
            color: 'white',
          }}
        >
          Logo
        </div>
      </div>

      {/* Like Button */}
      <div
        style={{
          position: 'absolute',
          bottom: 100,
          left: '20%',
          transform: `scale(${likeBounce})`,
          fontSize: 24,
          display: 'flex',
          alignItems: 'center',
          gap: 10,
        }}
      >
        👍 Like
      </div>

      {/* Subscribe Button */}
      <div
        style={{
          position: 'absolute',
          bottom: 60,
          left: `calc(50% + ${subscribeSlide}px)`,
          fontSize: 24,
          backgroundColor: 'red',
          color: 'white',
          padding: '10px 20px',
          borderRadius: 8,
        }}
      >
        Subscribe
      </div>

      {/* Notification Bell */}
      <div
        style={{
          position: 'absolute',
          bottom: 20,
          left: '60%',
          transform: `rotate(${bellShake}deg)`,
          fontSize: 24,
          display: 'flex',
          alignItems: 'center',
        }}
      >
        🔔 Notifications
      </div>
    </AbsoluteFill>
  );
};