1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[143],{51143:function(n,e,t){t.d(e,{Z:function(){return p}});var a=t(85893),i=t(89346),o=t(98778);let r=[{name:"Avoiding Mistakes animation",url:"https://ai-video-editor-assets.s3.us-west-2.amazonaws.com/video+(9).mp4",message:"Create an animation of the text: 3 mistakes to avoid. Give it a bento grid background and a nice slide in transition",code:"import * as React from 'react';\nimport anime from 'animejs';\nimport * as Remotion from 'remotion';\n\nconst Component = () => {\n const mainContainerRef = React.useRef(null);\n const containerRef = React.useRef(null);\n const numberRef = React.useRef(null);\n const mistakesRef = React.useRef(null);\n const toAvoidRef = React.useRef(null);\n const gridRef = React.useRef([]);\n\n const frame = Remotion.useCurrentFrame();\n const { fps } = Remotion.useVideoConfig();\n\n // Generate grid cells (4x6 grid)\n const gridCells = Array(24).fill(null);\n\n React.useEffect(() => {\n // Main container slide up animation\n anime({\n targets: mainContainerRef.current,\n translateY: [1920, 0], // Start from bottom of screen (1920px for vertical video)\n duration: 1200,\n easing: 'easeOutExpo',\n autoplay: false,\n }).seek((frame / fps) * 1000);\n\n // Enhanced Grid animation with cascading effect\n anime({\n targets: gridRef.current,\n scale: [0.3, 1],\n opacity: [0, 0.9],\n duration: 800,\n delay: (el, i) => {\n // Calculate grid position\n const row = Math.floor(i / 4);\n const col = i % 4;\n // Create wave effect from top-left to bottom-right\n // Added 800ms base delay to start after slide-up\n return 800 + (row + col) * 100;\n },\n easing: 'easeOutElastic(1, .8)',\n autoplay: false,\n }).seek((frame / fps) * 1000);\n\n // Main number animation\n anime({\n targets: numberRef.current,\n scale: [0, 1.2, 1],\n opacity: [0, 1],\n rotate: [-10, 0],\n duration: 1000,\n delay: 1200, // Increased delay to start after slide-up\n easing: 'easeOutElastic(1, .5)',\n autoplay: false,\n }).seek((frame / fps) * 1000);\n\n // \"mistakes\" text animation\n anime({\n targets: mistakesRef.current,\n translateX: [-50, 0],\n opacity: [0, 1],\n duration: 800,\n delay: 1600, // Increased delay\n easing: 'easeOutQuint',\n autoplay: false,\n }).seek((frame / fps) * 1000);\n\n // \"to avoid\" text animation\n anime({\n targets: toAvoidRef.current,\n translateY: [20, 0],\n opacity: [0, 1],\n duration: 800,\n delay: 2000, // Increased delay\n easing: 'easeOutQuint',\n autoplay: false,\n }).seek((frame / fps) * 1000);\n\n }, [frame, fps]);\n\n return (\n <Remotion.AbsoluteFill\n style={{\n backgroundColor: '#f0f4ff',\n overflow: 'hidden',\n }}\n >\n {/* Main container that slides up */}\n <div\n ref={mainContainerRef}\n style={{\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontFamily: 'SF Pro Display, -apple-system, sans-serif',\n transform: 'translateY(1920px)', // Start from bottom\n }}\n >\n {/* Bento Grid Background */}\n <div\n style={{\n position: 'absolute',\n width: '100%',\n height: '100%',\n display: 'grid',\n gridTemplateColumns: 'repeat(4, 1fr)',\n gridTemplateRows: 'repeat(6, 1fr)',\n gap: '15px',\n padding: '15px',\n zIndex: 1,\n }}\n >\n {gridCells.map((_, index) => (\n <div\n key={index}\n ref={(el) => (gridRef.current[index] = el)}\n style={{\n backgroundColor: 'white',\n borderRadius: '24px',\n opacity: 0,\n boxShadow: '0 4px 24px rgba(74, 111, 255, 0.08)',\n transform: 'scale(0.3)',\n transformOrigin: 'center',\n background: 'linear-gradient(135deg, #ffffff 0%, #f5f8ff 100%)',\n }}\n />\n ))}\n </div>\n\n {/* Main content container */}\n <div\n ref={containerRef}\n style={{\n position: 'relative',\n zIndex: 2,\n textAlign: 'center',\n padding: '60px',\n borderRadius: '30px',\n background: 'rgba(255, 255, 255, 0.9)',\n backdropFilter: 'blur(10px)',\n boxShadow: '0 20px 40px rgba(74, 111, 255, 0.15)',\n }}\n >\n {/* Number 3 */}\n <div\n ref={numberRef}\n style={{\n fontSize: '200px',\n fontWeight: '800',\n color: '#F
1F3B3B',\n marginBottom: '-20px',\n textShadow: '0 4px 20px rgba(255, 59, 59, 0.3)',\n lineHeight: '1',\n opacity: 0,\n }}\n >\n 3\n </div>\n\n {/* \"mistakes\" text */}\n <div\n ref={mistakesRef}\n style={{\n fontSize: '120px',\n fontWeight: '700',\n color: '#2d3958',\n marginBottom: '10px',\n textShadow: '0 4px 20px rgba(45, 57, 88, 0.1)',\n lineHeight: '1.1',\n opacity: 0,\n }}\n >\n mistakes\n </div>\n\n {/* \"to avoid\" text */}\n <div\n ref={toAvoidRef}\n style={{\n fontSize: '100px',\n fontWeight: '600',\n color: '#5b6988',\n textShadow: '0 4px 20px rgba(91, 105, 136, 0.1)',\n lineHeight: '1.1',\n opacity: 0,\n }}\n >\n to avoid\n </div>\n </div>\n\n {/* Enhanced gradient overlay */}\n <div\n style={{\n position: 'absolute',\n bottom: 0,\n left: 0,\n right: 0,\n height: '300px',\n background: 'linear-gradient(to bottom, transparent, rgba(240, 244, 255, 0.9))',\n zIndex: 3,\n pointerEvents: 'none',\n }}\n />\n </div>\n </Remotion.AbsoluteFill>\n );\n};"},{name:"Search bar animation",url:"https://ai-video-editor-assets.s3.us-west-2.amazonaws.com/search.mp4",message:"Create an animation of a search bar where I type in: What is Google. Give it a bento grid background",code:"import * as React from 'react';\nimport anime from 'animejs';\nimport * as Remotion from 'remotion';\n\nconst Component = () => {\n const searchBarRef = React.useRef(null);\n const cursorRef = React.useRef(null);\n const searchIconRef = React.useRef(null);\n const backgroundBlocksRef = React.useRef([]);\n\n const frame = Remotion.useCurrentFrame();\n const { fps } = Remotion.useVideoConfig();\n\n const searchText = \"What is Google\";\n const [displayText, setDisplayText] = React.useState('');\n\n React.useEffect(() => {\n // Animate search bar entrance - faster animation\n anime({\n targets: searchBarRef.current,\n scale: [0.9, 1],\n opacity: [0, 1],\n translateY: [20, 0],\n duration: 600,\n easing: 'easeOutExpo',\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Animate search icon - faster rotation\n anime({\n targets: searchIconRef.current,\n rotate: [0, 360],\n scale: [0.8, 1],\n opacity: [0, 1],\n duration: 800,\n easing: 'easeOutElastic(1, .5)',\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Animate cursor blink - faster blink rate\n anime({\n targets: cursorRef.current,\n opacity: [1, 0],\n duration: 500,\n loop: true,\n easing: 'steps(2)',\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Animate background blocks with Google colors\n anime({\n targets: backgroundBlocksRef.current,\n scale: [0.8, 1],\n opacity: [0, 0.15], // Slightly increased opacity\n delay: anime.stagger(50, {grid: [4, 4], from: 'center'}),\n duration: 600,\n easing: 'easeOutExpo',\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Handle text typing animation\n const currentCharIndex = Math.floor((frame / fps) * 20);\n if (currentCharIndex <= searchText.length) {\n setDisplayText(searchText.slice(0, currentCharIndex));\n }\n }, [frame, fps]);\n\n // Google colors for the background blocks\n const googleColors = [\n '#4285F4', // Google Blue\n '#DB4437', // Google Red\n '#F4B400', // Google Yellow\n '#0F9D58', // Google Green\n ];\n\n return (\n <Remotion.AbsoluteFill\n style={{\n backgroundColor: '#ffffff',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontFamily: 'SF Pro Display, system-ui, -apple-system, BlinkMacSystemFont, sans-serif',\n }}\n >
1\n {/* Background Grid */}\n <div\n style={{\n position: 'absolute',\n width: '100%',\n height: '100%',\n display: 'grid',\n gridTemplateColumns: 'repeat(4, 1fr)',\n gridTemplateRows: 'repeat(4, 1fr)',\n gap: '20px',\n padding: '40px',\n }}\n >\n {Array(16).fill(null).map((_, index) => (\n <div\n key={index}\n ref={(el) => (backgroundBlocksRef.current[index] = el)}\n style={{\n backgroundColor: googleColors[index % 4],\n borderRadius: '24px',\n opacity: 0,\n transition: 'transform 0.3s ease',\n }}\n />\n ))}\n </div>\n\n {/* Search Bar Container */}\n <div\n ref={searchBarRef}\n style={{\n position: 'relative',\n width: '80%',\n maxWidth: '1000px',\n height: '120px',\n backgroundColor: '#ffffff',\n borderRadius: '60px',\n boxShadow: '0 20px 40px rgba(0,0,0,0.1)',\n display: 'flex',\n alignItems: 'center',\n padding: '0 40px',\n zIndex: 2,\n }}\n >\n {/* Search Icon */}\n <div\n ref={searchIconRef}\n style={{\n fontSize: '48px',\n marginRight: '20px',\n opacity: 0,\n color: '#4285F4', // Google Blue\n }}\n >\n \uD83D\uDD0D\n </div>\n\n {/* Search Text */}\n <div\n style={{\n fontSize: '64px',\n fontWeight: '700',\n color: '#1a1a1a',\n display: 'flex',\n alignItems: 'center',\n letterSpacing: '-0.02em',\n }}\n >\n {displayText}\n <span\n ref={cursorRef}\n style={{\n width: '4px',\n height: '64px',\n backgroundColor: '#4285F4', // Google Blue\n marginLeft: '4px',\n opacity: 1,\n }}\n />\n </div>\n </div>\n\n {/* Decorative Gradient Overlay */}\n <div\n style={{\n position: 'absolute',\n bottom: 0,\n left: 0,\n right: 0,\n height: '200px',\n background: 'linear-gradient(to bottom, transparent, rgba(255,255,255,0.8))',\n pointerEvents: 'none',\n zIndex: 3,\n }}\n />\n </Remotion.AbsoluteFill>\n );\n};"},{name:"Bar Graph Animation",url:"https://ai-video-editor-assets.s3.us-west-2.amazonaws.com/video+(11).mp4",message:"Make an animated bar showing the median salary of a Software Engineer growing from 100k to 300k over the last decade in San Francisco",code:"import * as React from 'react';\nimport anime from 'animejs';\nimport * as Remotion from 'remotion';\n\nconst Component = () => {\n const barsRef = React.useRef([]);\n const labelsRef = React.useRef([]);\n const titleRef = React.useRef(null);\n \n const frame = Remotion.useCurrentFrame();\n const {fps} = Remotion.useVideoConfig();\n\n const salaryData = [\n { year: 2014, salary: 105000 },\n { year: 2015, salary: 120000 },\n { year: 2016, salary: 135000 },\n { year: 2017, salary: 155000 },\n { year: 2018, salary: 180000 },\n { year: 2019, salary: 210000 },\n { year: 2020, salary: 240000 },\n { year: 2021, salary: 265000 },\n { year: 2022, salary: 285000 },\n { year: 2023, salary: 300000 },\n ];\n\n const maxSalary = Math.max(...salaryData.map(d => d.salary));\n\n React.useEffect(() => {\n // Animate bars growing up\n anime({\n targets: barsRef.current,\n scaleY: [0, 1],\n translateY: ['100%', '0%'],\n delay: anime.stagger(100),\n easing: 'easeOutExpo',\n duration: 1500,\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Animate salary labels\n anime({\n targets: labelsRef.current,\n opacity: [0, 1],\n translateY: [20, 0],\n delay: anime.stagger(100),\n easing: 'easeOutQuad',\n duration: 8
100,\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Animate title\n anime({\n targets: titleRef.current,\n opacity: [0, 1],\n translateY: [-20, 0],\n easing: 'easeOutQuad',\n duration: 1000,\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n }, [frame, fps]);\n\n return (\n <Remotion.AbsoluteFill\n style={{\n backgroundColor: '#1a1a1a',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n fontFamily: 'SF Pro Display, system-ui, sans-serif',\n padding: '30px',\n }}\n >\n {/* Title */}\n <div\n ref={titleRef}\n style={{\n color: '#ffffff',\n fontSize: '56px',\n fontWeight: '700',\n textAlign: 'center',\n marginBottom: '30px',\n opacity: 0,\n textShadow: '0 0 20px rgba(255,255,255,0.3)',\n }}\n >\n SF Software Engineer Salaries\n <div style={{\n fontSize: '28px',\n fontWeight: '500',\n opacity: 0.7,\n marginTop: '8px',\n background: 'linear-gradient(to right, #4CAF50, #2196F3)',\n WebkitBackgroundClip: 'text',\n WebkitTextFillColor: 'transparent',\n textShadow: 'none',\n }}>\n Median Salary Growth 2014-2023\n </div>\n </div>\n\n {/* Chart container */}\n <div\n style={{\n display: 'flex',\n alignItems: 'flex-end',\n gap: '20px',\n height: '700px',\n padding: '35px',\n backgroundColor: 'rgba(255,255,255,0.05)',\n borderRadius: '30px',\n boxShadow: '0 8px 32px rgba(0,0,0,0.2)',\n backdropFilter: 'blur(10px)',\n border: '1px solid rgba(255,255,255,0.1)',\n }}\n >\n {salaryData.map((data, index) => (\n <div\n key={data.year}\n style={{\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: '14px',\n }}\n >\n {/* Salary label */}\n <div\n ref={el => labelsRef.current[index] = el}\n style={{\n color: '#4CAF50',\n fontSize: '28px',\n fontWeight: '600',\n opacity: 0,\n whiteSpace: 'nowrap',\n textShadow: '0 0 15px rgba(76,175,80,0.5)',\n }}\n >\n ${(data.salary / 1000).toFixed(0)}k\n </div>\n\n {/* Bar */}\n <div\n style={{\n width: '65px',\n height: `${(data.salary / maxSalary) * 550}px`,\n backgroundColor: 'rgba(255,255,255,0.1)',\n borderRadius: '14px',\n overflow: 'hidden',\n position: 'relative',\n boxShadow: '0 0 20px rgba(76,175,80,0.1)',\n }}\n >\n <div\n ref={el => barsRef.current[index] = el}\n style={{\n width: '100%',\n height: '100%',\n background: `linear-gradient(180deg, \n hsl(${120 + (index * 5)}, 70%, 60%) 0%, \n hsl(${120 + (index * 5)}, 60%, 45%) 100%)`,\n transformOrigin: 'bottom',\n borderRadius: '14px',\n boxShadow: `0 0 20px hsl(${120 + (index * 5)}, 60%, 50%, 0.4)`,\n }}\n />\n </div>\n\n {/* Year label */}\n <div\n style={{\n color: '#ffffff',\n fontSize: '20px',\n fontWeight: '500',\n opacity: 0.7,\n textShadow: '0 0 10px rgba(255,255,255,0.3)',\n }}\n >\n {data.year}\n </div>\n </div>\n ))}\n </div>\n\n {/* Legend */}\n <div\n style={{\n color: '#ffffff',\n fontSize: '20px',\n opacity: 0.6,\n marginTop: '25px',\n textAlign: 'center',\n textShadow: '0 0 10px rgba(255,255,255,0.2)',\n }}\n >\n Data represents median base salary\n <br />\n Source: Market Research Data\n </div>\n </Remotion.AbsoluteFill>\n );\n};"},{name:"Follower Growth Animation",url:"https://ai-video-editor-assets.s3.us-west-2.amazonaws.com/%5D.mp4",message:"create an animated line chart showing my tiktok following increased from 400 to 8000 from 2022 to 2024 - use a number counter",code:"import * as React from 'react';\nimport anime from 'animejs';\nimport * as Remotion from 'remotion';\n\nconst Component = () => {\n const canvasRef = React.useRef(null);\n const chartRef = React.useRef(null);\n const numberRef = React.useRef(null);\n const frame = Remotion.useCurrentFrame();\n const { fps, width, height } = Remotion.useVideoConfig();\n\n // Safe area calculations (10% padding)\n const safeAreaPadding = {\n x: width * 0.1,\n y: height * 0.1,\n };\n \n // Adjust chart area with more space for y-axis\n const yAxisOffset = width * 0.15; // Increased from default safe area\n const safeWidth = width - (safeAreaPadding.x + yAxisOffset);\n const safeHeight = height - (safeAreaPadding.y * 2);\n\n // Data points for the chart (adjusted x positions)\n const data = [\n { x: yAxisOffset, y: 400, date: '2022' },\n { x: (width + yAxisOffset) / 2, y: 3000, date: '2023' }
1,\n { x: width - safeAreaPadding.x, y: 8000, date: '2024' },\n ];\n\n // Convert data points to SVG path\n const createPath = () => {\n const points = data.map(point => {\n const x = point.x;\n const y = height - safeAreaPadding.y - (point.y / 8000 * (safeHeight - 200));\n return `${x},${y}`;\n }).join(' L ');\n return `M ${points}`;\n };\n\n React.useEffect(() => {\n const canvas = canvasRef.current;\n const ctx = canvas.getContext('2d');\n \n const createParticle = (x, y) => {\n const colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'];\n return {\n x,\n y,\n color: colors[Math.floor(Math.random() * colors.length)],\n radius: Math.random() * 4 + 3,\n velocity: {\n x: (Math.random() - 0.5) * 10,\n y: (Math.random() - 0.5) * 10\n },\n alpha: 1\n };\n };\n\n let particles = [];\n \n const animate = () => {\n ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';\n ctx.fillRect(0, 0, width, height);\n \n if (frame > 45) {\n if (Math.random() < 0.1) {\n const x = Math.random() * width;\n const y = Math.random() * height;\n for (let i = 0; i < 25; i++) {\n particles.push(createParticle(x, y));\n }\n }\n }\n \n particles.forEach((particle, i) => {\n particle.x += particle.velocity.x;\n particle.y += particle.velocity.y;\n particle.alpha -= 0.01;\n \n ctx.beginPath();\n ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);\n ctx.fillStyle = `rgba(${particle.color}, ${particle.alpha})`;\n ctx.filter = 'blur(4px)';\n ctx.fill();\n \n if (particle.alpha <= 0) {\n particles.splice(i, 1);\n }\n });\n };\n\n const path = chartRef.current;\n const pathLength = path.getTotalLength();\n \n anime({\n targets: path,\n strokeDashoffset: [pathLength, 0],\n easing: 'easeInOutSine',\n duration: 2000,\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n anime({\n targets: numberRef.current,\n innerHTML: [400, 8000],\n round: 1,\n easing: 'easeInOutExpo',\n duration: 2000,\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n animate();\n }, [frame, fps, width, height]);\n\n return (\n <Remotion.AbsoluteFill\n style={{\n backgroundColor: '#0A0A0A',\n fontFamily: 'SF Pro Display, system-ui, sans-serif',\n }}\n >
1\n {/* Gradient Background */}\n <div\n style={{\n position: 'absolute',\n width: '100%',\n height: '100%',\n background: 'radial-gradient(circle at center, #1a1a1a 0%, #0A0A0A 100%)',\n }}\n />\n\n <canvas\n ref={canvasRef}\n width={width}\n height={height}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n }}\n />\n\n <div\n style={{\n position: 'relative',\n width: '100%',\n height: '100%',\n padding: safeAreaPadding.x,\n }}\n >\n {/* Title */}\n <div\n style={{\n position: 'absolute',\n top: safeAreaPadding.y,\n left: '50%',\n transform: 'translateX(-50%)',\n textAlign: 'center',\n }}\n >\n <h1\n style={{\n color: 'white',\n fontSize: '120px',\n fontWeight: '800',\n margin: 0,\n textShadow: '0 0 30px rgba(255, 59, 92, 0.5)',\n letterSpacing: '-2px',\n }}\n >\n TikTok Growth\n </h1>\n <h2\n style={{\n color: '#ffffff90',\n fontSize: '48px',\n fontWeight: '600',\n margin: '20px 0',\n textShadow: '0 0 20px rgba(255, 255, 255, 0.3)',\n }}\n >\n Follower Evolution 2022-2024\n </h2>\n </div>\n\n {/* Follower Counter */}\n <div\n style={{\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n color: '#F
1F3B5C',\n textAlign: 'center',\n zIndex: 2,\n }}\n >\n <span \n ref={numberRef}\n style={{\n fontSize: '180px',\n fontWeight: '800',\n textShadow: '0 0 40px rgba(255, 59, 92, 0.8)',\n display: 'block',\n }}\n >\n 400\n </span>\n <span \n style={{\n fontSize: '80px',\n fontWeight: '600',\n color: '#ffffff',\n textShadow: '0 0 20px rgba(255, 255, 255, 0.5)',\n }}\n >\n followers\n </span>\n </div>\n\n {/* Line Chart */}\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox={`0 0 ${width} ${height}`}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n }}\n >\n <defs>\n <filter id=\"glow\">\n <feGaussianBlur stdDeviation=\"4\" result=\"coloredBlur\"/>\n <feMerge>\n <feMergeNode in=\"coloredBlur\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n </defs>\n\n {/* Y-axis line */}\n <line\n x1={yAxisOffset}\n y1={height - safeAreaPadding.y}\n x2={yAxisOffset}\n y2={safeAreaPadding.y + 100}\n stroke=\"#ffffff30\"\n strokeWidth=\"2\"\n />\n\n {/* Y-axis labels */}\n {[0, 2000, 4000, 6000, 8000].map((value, index) => (\n <g key={index}>\n {/* Horizontal grid line */}\n <line\n x1={yAxisOffset}\n y1={height - safeAreaPadding.y - (value / 8000 * (safeHeight - 200))}
1\n x2={width - safeAreaPadding.x}\n y2={height - safeAreaPadding.y - (value / 8000 * (safeHeight - 200))}\n stroke=\"#ffffff15\"\n strokeWidth=\"1\"\n strokeDasharray=\"5,5\"\n />\n {/* Label */}\n <text\n x={yAxisOffset - 20}\n y={height - safeAreaPadding.y - (value / 8000 * (safeHeight - 200))}\n fill=\"#ffffff90\"\n fontSize=\"36\"\n textAnchor=\"end\"\n filter=\"url(#glow)\"\n alignmentBaseline=\"middle\"\n >\n {value.toLocaleString()}\n </text>\n </g>\n ))}\n\n {/* X-axis labels */}\n {data.map((point, index) => (\n <text\n key={index}\n x={point.x}\n y={height - safeAreaPadding.y + 60}\n fill=\"#ffffff90\"\n fontSize=\"48\"\n textAnchor=\"middle\"\n filter=\"url(#glow)\"\n >\n {point.date}\n </text>\n ))}\n\n {/* Chart line */}\n <path\n ref={chartRef}\n d={createPath()}\n fill=\"none\"\n stroke=\"#FF3B5C\"\n strokeWidth=\"12\"\n strokeLinecap=\"round\"\n strokeDasharray=\"2000\"\n strokeDashoffset=\"2000\"\n filter=\"url(#glow)\"\n />\n\n {/* Data points */}\n {data.map((point, index) => (\n <circle\n key={index}\n cx={point.x}\n cy={height - safeAreaPadding.y - (point.y / 8000 * (safeHeight - 200))}\n r=\"16\"\n fill=\"#FF3B5C\"\n filter=\"url(#glow)\"\n />\n ))}\n </svg>\n </div>\n </Remotion.AbsoluteFill>\n );\n};"},{name:"Checklist animation",url:"https://ai-video-editor-assets.s3.us-west-2.amazonaws.com/video+(2).mp4",message:"Create an animation of a checklist for content creators. Put 5 items in the checklist of your choice",code:'import * as React from "react";\n import * as Remotion from "remotion";\n import anime from "animejs";\n\n const Component = () => {\n const checklistRef = React.useRef(null);\n const itemsRef = React.useRef([]);\n const checksRef = React.useRef([]);\n const frame = Remotion.useCurrentFrame();\n const { fps } = Remotion.useVideoConfig();\n\n const tasks = [\n "Plan Your Content \uD83D\uDCDD",\n "Film Quality Video \uD83C\uDFA5",\n "Edit with Style â¨",\n "Create Thumbnails \uD83C\uDFA8",\n "Share & Engage \uD83D\uDE80",\n ];\n\n // Bright, fresh color palette\n const colors = {\n background: "#f0f7ff", // Light blue background\n cardBg: "rgba(255, 255, 255, 0.9)",\n primary: "#0066ff", // Vibrant blue\n secondary: "#00cc88", // Fresh green\n accent: "#ff3366", // Bright pink\n text: "#2d3436", // Dark grey for text\n };\n\n React.useEffect(() => {\n // Animate the checklist container\n anime({\n targets: checklistRef.current,\n translateY: [20, 0],\n opacity: [0, 1],\n duration: 800,\n easing: "easeOutExpo",\n autoplay: false,\n }).seek((frame / fps) * 1000);\n\n // Animate each checklist item\n anime({\n targets: itemsRef.current,\n translateX: [-30, 0],\n opacity: [0, 1],\n duration: 600,\n delay: anime.stagger(200),\n easing: "easeOutCubic",\n autoplay: false,\n }).seek((frame / fps) * 1000);\n\n // Animate checkmarks with a bouncy effect\n anime({\n targets: checksRef.current,\n scale: [0, 1],\n rotateZ: [45, 0],\n opacity: [0, 1],\n duration: 800,\n delay: anime.stagger(200, { start: 300 }),\n easing: "easeOutElastic(1, .5)",\n autoplay: false,\n }).seek((frame / fps) * 1000);\n }, [frame, fps]);\n\n return (\n <Remotion.AbsoluteFill\n style={{\n backgroundColor: colors.background,\
1n fontFamily: "SF Pro Display, system-ui, sans-serif",\n color: colors.text,\n display: "flex",\n justifyContent: "center",\n alignItems: "center",\n }}\n >\n {/* Simple gradient background */}\n <div\n style={{\n position: "absolute",\n width: "100%",\n height: "100%",\n background: `linear-gradient(145deg,\n ${colors.background} 0%,\n #e1f0ff 50%,\n #d8ebff 100%\n )`,\n }}\n />\n\n <div\n ref={checklistRef}\n style={{\n padding: "40px",\n borderRadius: "30px",\n backgroundColor: colors.cardBg,\n backdropFilter: "blur(10px)",\n boxShadow: "0 20px 40px rgba(0,102,255,0.1)",\n width: "80%",\n maxWidth: "1000px",\n zIndex: 2,\n border: "1px solid rgba(255,255,255,0.8)",\n }}\n >\n <h1\n style={{\n fontSize: "80px",\n marginBottom: "60px",\n textAlign: "center",\n background: `linear-gradient(45deg, ${colors.primary}, ${colors.accent})`,\n WebkitBackgroundClip: "text",\n WebkitTextFillColor: "transparent",\n fontWeight: "bold",\n }}\n >\n Creator Checklist\n </h1>\n\n {tasks.map((task, index) => (\n <div\n key={index}\n ref={(el) => (itemsRef.current[index] = el)}\n style={{\n display: "flex",\n alignItems: "center",\n marginBottom: "40px",\n opacity: 0,\n padding: "10px 20px",\n borderRadius: "15px",\n transition: "all 0.3s ease",\n background: "rgba(255,255,255,0.5)",\n }}\n >\n <div\n ref={(el) => (checksRef.current[index] = el)}\n style={{\n width: "50px",\n height: "50px",\n borderRadius: "50%",\n background: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})`,\n marginRight: "30px",\n display: "flex",\n justifyContent: "center",\n alignItems: "center",\n opacity: 0,\n boxShadow: `0 4px 12px ${colors.primary}40`,\n }}\n >\n <svg\n width="24"\n height="24"\n viewB
1ox="0 0 24 24"\n fill="none"\n stroke="white"\n strokeWidth="3"\n strokeLinecap="round"\n strokeLinejoin="round"\n >\n <polyline points="20 6 9 17 4 12" />\n </svg>\n </div>\n <span\n style={{\n fontSize: "48px",\n fontWeight: "600",\n color: colors.text,\n display: "flex",\n alignItems: "center",\n gap: "15px",\n }}\n >\n {task}\n </span>\n </div>\n ))}\n </div>\n\n {/* Subtle gradient overlay */}\n <div\n style={{\n position: "absolute",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n background: `\n radial-gradient(circle at 20% 20%, rgba(255,255,255,0.4) 0%, transparent 60%),\n radial-gradient(circle at 80% 80%, rgba(0,102,255,0.1) 0%, transparent 60%)\n `,\n zIndex: 1,\n }}\n />\n </Remotion.AbsoluteFill>\n );\n };'},{name:"Youtube subscribe animation",url:"https://ai-video-editor-assets.s3.us-west-2.amazonaws.com/video+(4).mp4",message:"Create an animation of a Youtube subscribe button for @YourRichBff",code:"import * as React from 'react';\nimport anime from 'animejs';\nimport * as Remotion from 'remotion';\n\nconst Component = () => {\n const containerRef = React.useRef(null);\n const buttonRef = React.useRef(null);\n const bellRef = React.useRef(null);\n const textRef = React.useRef(null);\n const handleRef = React.useRef(null);\n const frame = Remotion.useCurrentFrame();\n const { fps } = Remotion.useVideoConfig();\n\n React.useEffect(() => {\n // Main container slide up animation\n const containerTimeline = anime.timeline({\n autoplay: false,\n });\n\n containerTimeline\n .add({\n targets: containerRef.current,\n translateY: ['100%', '0%'],\n duration: 1000,\n easing: 'easeOutExpo',\n });\n\n // Button animation timeline\n const buttonTimeline = anime.timeline({\n autoplay: false,\n });\n\n buttonTimeline\n .add({\n targets: buttonRef.current,\n scale: [0.8, 1],\n opacity: [0, 1],\n backgroundColor: ['#c4302b', '#FF0000'],\n borderRadius: ['4px', '32px'],\n duration: 800,\n easing: 'easeOutElastic(1, .8)',\n delay: 400 // Delay to start after slide up\n })\n .add({\n targets: textRef.current,\n opacity: [0, 1],\n translateY: [10, 0],\n duration: 600,\n easing: 'easeOutExpo',\n }, '-=400')\n .add({\n targets: bellRef.current,\n opacity: [0, 1],\n scale: [0.5, 1],\n rotate: [-15, 0],\n duration: 800,\n easing: 'easeOutElastic(1, .8)',\n }, '-=400')\n .add({\n targets: handleRef.current,\n opacity: [0, 1],\n translateY: [20, 0],\n scale: [0.9, 1],\n duration: 600,\n easing: 'easeOutExpo',\n }, '-=400')\n .add({\n targets: bellRef.current,\n rotate: [-8, 8, -5, 5, -3, 3, 0],\n duration: 1000,\n easing: 'easeOutElastic(1, .8)',\n })\n .add({\n targets: buttonRef.current,\n scale: [1, 0.95, 1],\n duration: 400,\n easing: 'easeOutExpo',\n }, '-=800');\n\n // Sync with Remotion frame\n containerTimeline.seek((frame / fps) * 1000);\n buttonTimeline.seek((frame / fps) * 1000);\n }, [frame, fps]);\n\n return (\n <Remotion.AbsoluteFill\n style={{\n background: 'linear-gradient(135deg, #FF6B6B, #4ECDC4, #45B7D1, #96E6B3)',\n backgroundSize: '400% 400%',\n animation: 'gradient 15s ease infinite',\n overflow: 'hidden',\n }}\n >\n {/* Animated gradient overlay */}\n <div style={{\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n background: 'radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%)',\n }} />\n\n {/* Main content container */}\n <div\n ref={containerRef}\n style={{\n height: '100%',\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n gap: '40px',\n transform: 'translateY(100%)', // Initial position for slide up\n }}\n >\n {/* Subscribe Button Container */}\n <div\n ref={buttonRef}
1\n style={{\n backgroundColor: '#FF0000',\n padding: '25px 50px',\n borderRadius: '32px',\n display: 'flex',\n alignItems: 'center',\n gap: '20px',\n boxShadow: '0 12px 48px rgba(0, 0, 0, 0.3)',\n opacity: 0,\n transform: 'scale(0.8)',\n background: 'linear-gradient(45deg, #FF0000, #FF4444)',\n }}\n >\n {/* Bell Icon */}\n <div\n ref={bellRef}\n style={{\n fontSize: '72px',\n color: 'white',\n opacity: 0,\n transform: 'scale(0.5)',\n filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.2))',\n }}\n >\n \uD83D\uDD14\n </div>\n\n {/* Subscribe Text */}\n <span\n ref={textRef}\n style={{\n color: 'white',\n fontSize: '96px',\n fontFamily: 'YouTube Sans, -apple-system, BlinkMacSystemFont, sans-serif',\n fontWeight: '700',\n letterSpacing: '-1px',\n opacity: 0,\n transform: 'translateY(10px)',\n textShadow: '0 2px 4px rgba(0,0,0,0.2)',\n }}\n >\n Subscribe\n </span>\n </div>\n\n {/* Handle Container */}\n <div\n ref={handleRef}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: '12px',\n opacity: 0,\n transform: 'translateY(20px)',\n padding: '20px 40px',\n borderRadius: '24px',\n background: 'rgba(255,255,255,0.15)',\n backdropFilter: 'blur(10px)',\n boxShadow: '0 8px 32px rgba(0,0,0,0.1)',\n }}\n >\n <span\n style={{\n fontSize: '80px',\n fontFamily: 'YouTube Sans, -apple-system, BlinkMacSystemFont, sans-serif',\n fontWeight: '800',\n color: 'white',\n letterSpacing: '-1px',\n textShadow: '0 2px 4px rgba(0,0,0,0.2)',\n }}\n >\n @YourRichBff\n </span>\n </div>\n </div>\n </Remotion.AbsoluteFill>\n );\n};"},{name:"Timeline animation",url:"https://ai-video-editor-assets.s3.us-west-2.amazonaws.com/video+(3).mp4",message:"Create an animation of a timeline with these points: August 2023 - started journey, September 2023 - Launched the app, October 2023 - 100k downloads, November 2023 - $1m ARR",code:'import * as React from "react";\n import * as Remotion from "remotion";\n import anime from "animejs";\n\n const Component = () => {\n const containerRef = React.useRef(null);\n const timelineItemsRef = React.useRef([]);\n const linesRef = React.useRef([]);\n const iconRefs = React.useRef([]);\n\n const frame = Remotion.useCurrentFrame();\n const { fps } = Remotion.useVideoConfig();\n\n const milestones = [\n {\n date: "August 2023",\n text: "Started journey",\n icon: "\uD83D\uDE80",\n color: "#FF6B8B", // Bright pink\n gradientLight: "#FFE1E8",\n },\n {\n date: "September 2023",\n text: "Launched the app",\n icon: "\uD83D\uDCF1",\n color: "#4C49EA", // Vibrant blue\n gradientLight: "#E0DFFF",\n },\n {\n date: "October 2023",\n text: "100k downloads",\n icon: "\uD83D\uDCC8",\n color: "#00BFA6", // Bright teal\n gradientLight: "#D6F5F0",\n },\n {\n date: "November 2023",\n text: "$1m ARR",\n icon: "\uD83D\uDCB0",\n color: "#FF9F38", // Bright orange\n gradientLight: "#FFE8CC",\n },\n ];\n\n React.useEffect(() => {\n // Animate timeline lines\n anime({\n targets: linesRef.current,\n scaleX: [0, 1],\n opacity: [0, 1],\n duration: 1200,\n delay: (el, i) => 300 + i * 200,\n easing: "easeOutExpo",\n autoplay: false,\n }).seek((frame / fps) * 1000);\n\n // Animate milestone items\n anime({\n targets: timelineItemsRef.current,\n translateY: [50, 0],\n opacity: [0, 1],\n scale: [0.8, 1],\n duration: 1500,\n delay: (el, i) => 500 + i * 200,\n easing: "easeOutElastic(1.2, 0.5)",\n autoplay: false,\n }).seek((frame / fps) * 1000);\n\n // Animate icons with floating effect\n anime({\n targets: iconRefs.current,\n translateY: [0, -15],\n scale: [1, 1.2],\n rotate: [-10, 10],\n duration: 2000,\n direction: "alternate",\n loop: true,\n easing: "easeInOutSine",\n delay: (el, i) => i * 100,\n autoplay: false,\n }).seek((frame / fps) * 1000);\n }, [frame, fps]);\n\n return (\n <Remotion.AbsoluteFill\n style={{\n backgroundColor: "#FFFFFF", // Pure white background\n display: "flex",\n justifyContent: "center",\n alignItems: "center",\n fontFamily: "SF Pro Display, system-ui, -apple-system, sans-serif",\n }}\n >
1\n {/* Background gradient overlay */}\n <div\n style={{\n position: "absolute",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n background: "linear-gradient(145deg, #F5F7FF, #FFF5F9)",\n opacity: 0.7,\n }}\n />\n\n <div\n ref={containerRef}\n style={{\n width: "90%",\n maxWidth: "1600px",\n padding: "40px",\n position: "relative",\n zIndex: 1,\n }}\n >\n <div\n style={{\n display: "flex",\n flexDirection: "column",\n gap: "60px",\n position: "relative",\n }}\n >\n {milestones.map((milestone, index) => (\n <div key={index} style={{ position: "relative" }}>\n {/* Connecting line */}\n {index < milestones.length - 1 && (\n <div\n ref={(el) => (linesRef.current[index] = el)}\n style={{\n position: "absolute",\n left: "50%",\n top: "100%",\n width: "6px",\n height: "60px",\n background: `linear-gradient(to bottom, ${milestone.color}, ${\n milestones[index + 1].color\n })`,\n transformOrigin: "top",\n opacity: 0,\n borderRadius: "3px",\n }}\n />\n )}\n\n {/* Milestone item */}\n <div\n ref={(el) => (timelineItemsRef.current[index] = el)}\n style={{\n display: "flex",\n alignItems: "center",\n gap: "30px",\n opacity: 0,\n background: "rgba(255, 255, 255, 0.9)",\n padding: "30px",\n borderRadius: "24px",\n boxShadow: "0 20px 40px rgba(0, 0, 0, 0.06)",\n border: "1px solid rgba(255, 255, 255, 0.8)",\n }}\n >\n {/* Icon container */}\n <div\n ref={(el) => (iconRefs.current[index] = el)}\n style={{\n width: "100px",\n height: "100px",\n background: `linear-gradient(135deg, ${milestone.color}, ${milestone.gradientLight})`,\n borderRadius: "24px",\n display: "flex",\n alignItems: "center",\n justifyContent: "center",\n fontSize: "50px",\n boxShadow: `0 12px 24px ${milestone.color}20`,\n border: "2px solid rgba(255, 255, 255, 0.8)",\n }}\n >\n {milestone.icon}\n </div>\n\n {/* Text content */}\n <div\n style={{\n display: "flex",\n flexDirection: "column",\n gap: "8px",\n }}\n >\n <h2\n style={{\n fontSize: "100px",\n margin: 0,\n fontWeight: "bold",\n color: milestone.color,\n textShadow: `0 4px 12px ${milestone.color}20`,\n }}\n >\n {milestone.date}\n </h2>\n <p\n style={{\n fontSize: "60px",\n margin: 0,\n color: "#464A6C", // Softer dark color for text\n fontWeight: "500",\n }}\n >\n {milestone.text}\n </p>\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n </Remotion.AbsoluteFill>\n );\n };'},{name:"Comparison chart animation",url:"https://ai-video-editor-assets.s3.us-west-2.amazonaws.com/video+(5).mp4",message:"Create an animation of a comparison table for big tech jobs vs startup jobs. Choose 3 items of your choice for the table",code:"import * as React from 'react';\n import anime from 'animejs';\n import * as Remotion from 'remotion';\n\n const Component = () => {\n const containerRef = React.useRef(null);\n const bigTechRef = React.useRef(null);\n const startupRef = React.useRef(null);\n const bigTechItemsRef = React.useRef([]);\n const startupItemsRef = React.useRef([]);\n\n const frame = Remotion.useCurrentFrame();\n const { fps } = Remotion.useVideoConfig();\n\n const comparisonData = {\n bigTech: [\n {icon: \"\uD83D\uDCB0\", title: \"High Base Salary\", desc: \"$200k+ TC\"},\n {icon: \"\uD83C\uDFE2\", title: \"Structured Growth\", desc: \"Clear ladder\"},\n {icon: \"\uD83C\uDFAF\", title: \"Specialization\", desc: \"Deep expertise\"},\n ],\n startup: [\n {icon: \"\uD83D\uDCC8\", title: \"Equity Upside\", desc: \"Early shares\"},\n {icon: \"\uD83D\uDE80\", title: \"Fast Growth\", desc: \"Wear many hats\"},\n {icon: \"\uD83C\uDFA8\", title: \"Creative Freedom\", desc: \"High impact\"},\n ],\n };\n\n React.useEffect(() =>
1 {\n // Big Tech Header animation\n anime({\n targets: bigTechRef.current,\n translateY: [-50, 0],\n opacity: [0, 1],\n duration: 1000,\n easing: 'easeOutExpo',\n autoplay: false,\n }).seek((frame / fps) * 1000);\n\n // Big Tech Items animation\n anime({\n targets: bigTechItemsRef.current,\n translateX: [-30, 0],\n opacity: [0, 1],\n duration: 800,\n delay: anime.stagger(300),\n easing: 'easeOutCubic',\n autoplay: false,\n }).seek((frame / fps) * 1000);\n\n // Startup Header animation (delayed by 1.5s)\n anime({\n targets: startupRef.current,\n translateY: [-50, 0],\n opacity: [0, 1],\n duration: 1000,\n delay: 1500,\n easing: 'easeOutExpo',\n autoplay: false,\n }).seek((frame / fps) * 1000);\n\n // Startup Items animation (delayed by 1.5s)\n anime({\n targets: startupItemsRef.current,\n translateX: [-30, 0],\n opacity: [0, 1],\n duration: 800,\n delay: (el, i) => 1800 + (i * 300), // Starts after header, staggers items\n easing: 'easeOutCubic',\n autoplay: false,\n }).seek((frame / fps) * 1000);\n\n }, [frame, fps]);\n\n return (\n <Remotion.AbsoluteFill\n style={{\n backgroundColor: '#f8f9fa',\n fontFamily: 'SF Pro Display, system-ui',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '40px',\n }}\n >\n <div\n ref={containerRef}\n style={{\n width: '100%',\n maxWidth: '900px',\n display: 'flex',\n gap: '40px',\n padding: '40px',\n background: 'white',\n borderRadius: '32px',\n boxShadow: '0 20px 40px rgba(0,0,0,0.1)',\n }}\n >\n {/* Big Tech Column */}\n <div style={{flex: 1}}>\n <h2\n ref={bigTechRef}\n style={{\n fontSize: '64px',\n marginBottom: '40px',\n color: '#4A90E2',\n textAlign: 'center',\n opacity: 0,\n }}\n >\n Big Tech \uD83C\uDFE2\n </h2>\n {comparisonData.bigTech.map((item, index) => (\n <div\n key={`tech-${index}`}\n ref={(el) => (bigTechItemsRef.current[index] = el)}\n style={{\n backgroundColor: '#F0F7FF',\n padding: '24px',\n borderRadius: '16px',\n marginBottom: '20px',\n opacity: 0,\n transform: 'translateX(-30px)',\n }}\n >\n <div style={{fontSize: '48px', marginBottom: '8px'}}>\n {item.icon}\n </div>\n <h3 style={{fontSize: '32px', margin: '0 0 8px 0', color: '#2C3E50'}}>\n {item.title}\n </h3>\n <p style={{fontSize: '24px', margin: 0, color: '#7F8C8D'}}>\n {item.desc}\n </p>\n </div>\n ))}\n </div>\n\n {/* Startup Column */}\n <div style={{flex: 1}}>\n <h2\n ref={startupRef}\n style={{\n fontSize: '64px',\n marginBottom: '40px',\n color: '#E74C3C',\n textAlign: 'center',\n opacity: 0,\n }}\n >\n Startup \uD83D\uDE80\n </h2>\n {comparisonData.startup.map((item, index) => (\n <div\n key={`startup-${index}`}\n ref={(el) => (startupItemsRef.current[index] = el)}\n style={{\n backgroundColor: '#FFF0F0',\n padding: '24px',\n borderRadius: '16px',\n marginBottom: '20px',\n opacity: 0,\n transform: 'translateX(-30px)',\n }}\n >\n <div style={{fontSize: '48px', marginBottom: '8px'}}>\n {item.icon}\n </div>\n <h3 style={{fontSize: '32px', margin: '0 0 8px 0', color: '#2C3E50'}}>\n {item.title}\n </h3>\n <p style={{fontSize: '24px', margin: 0, color: '#7F8C8D'}}>\n {item.desc}\n </p>\n </div>\n ))}\n </div>\n </div>\n </Remotion.AbsoluteFill>\n );\n };"},{name:"Clock Animation",url:"https://ai-video-editor-assets.s3.us-west-2.amazonaws.com/video+(6).mp4",message:"Create an animation of a clock spinning rapidly from 12 to 4 and shows 4 hours at the bottom",code:"import * as React from 'react';\nimport anime from 'animejs';\nimport * as Remotion from 'remotion';\n\nconst Component = () => {\n const clockRef = React.useRef(null);\n const hourHandRef = React.useRef(null);\n const minuteHandRef = React.useRef(null);\n const numbersRef = React.useRef([]);\n const textRef = React.useRef(null);\n\n const frame = Remotion.useCurrentFrame();\n const { fps, width, height } = Remotion.useVideoConfig();\n\n // Calculate the ideal clock size based on screen dimensions\n const clockSize = Math.min(width, height) * 0.5;\n\n React.useEffect(() =>
1 {\n // Clock face entrance animation\n anime({\n targets: clockRef.current,\n scale: [0.5, 1],\n opacity: [0, 1],\n duration: 800,\n easing: 'easeOutElastic(1, .8)',\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Text animation\n anime({\n targets: textRef.current,\n translateY: [50, 0],\n opacity: [0, 1],\n duration: 800,\n delay: 200,\n easing: 'easeOutExpo',\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Numbers animation\n anime({\n targets: numbersRef.current,\n scale: [0, 1],\n opacity: [0, 1],\n delay: anime.stagger(50, {from: 'center'}),\n duration: 600,\n easing: 'easeOutExpo',\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Hour hand animation - adjusted to rotate 120 degrees (4 hours)\n anime({\n targets: hourHandRef.current,\n rotate: [0, 120], // 12 to 4 (each hour is 30 degrees, so 4 hours = 120 degrees)\n duration: 2000,\n easing: 'easeInOutQuart',\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Minute hand animation - adjusted to match 4 hours (8 complete rotations)\n anime({\n targets: minuteHandRef.current,\n rotate: [0, 360 * 8], // 8 complete rotations for 4 hours\n duration: 2000,\n easing: 'easeInOutQuart',\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n }, [frame, fps]);\n\n // Generate clock numbers\n const clockNumbers = Array.from({length: 12}, (_, i) => {\n const angle = (i * 30 - 90) * (Math.PI / 180);\n const radius = clockSize * 0.35;\n const x = Math.cos(angle) * radius;\n const y = Math.sin(angle) * radius;\n return {number: i === 0 ? 12 : i, x, y};\n });\n\n return (\n <Remotion.AbsoluteFill\n style={{\n backgroundColor: '#1a1a1a',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n gap: '40px',\n }}\n >\n <div\n ref={clockRef}\n style={{\n width: clockSize,\n height: clockSize,\n borderRadius: '50%',\n backgroundColor: '#ffffff',\n position: 'relative',\n boxShadow: '0 0 50px rgba(255,255,255,0.2), inset 0 0 50px rgba(0,0,0,0.1)',\n transform: 'scale(0.5)',\n opacity: 0,\n marginTop: '-100px',\n }}\n >\n {/* Clock numbers */}\n {clockNumbers.map((item, index) => (\n <div\n key={index}\n ref={el => numbersRef.current[index] = el}\n style={{\n position: 'absolute',\n left: '50%',\n top: '50%',\n transform: `translate(-50%, -50%) translate(${item.x}px, ${item.y}px)`,\n fontSize: `${clockSize * 0.08}px`,\n fontWeight: 'bold',\n color: '#333',\n opacity: 0,\n fontFamily: 'Arial',\n }}\n >\n {item.number}\n </div>\n ))}\n\n {/* Hour hand */}\n <div\n ref={hourHandRef}\n style={{\n position: 'absolute',\n width: clockSize * 0.03,\n height: clockSize * 0.25,\n backgroundColor: '#333',\n left: '50%',\n top: '50%',\n transformOrigin: 'bottom center',\n transform: 'translate(-50%, -100%) rotate(0deg)',\n borderRadius: `${clockSize * 0.015}px`,\n boxShadow: '0 0 10px rgba(0,0,0,0.2)',\n }}\n />\n\n {/* Minute hand */}\n <div\n ref={minuteHandRef}\n style={{\n position: 'absolute',\n width: clockSize * 0.02,\n height: clockSize * 0.32,\n backgroundColor: '#666',\n left: '50%',\n top: '50%',\n transformOrigin: 'bottom center',\n transform: 'translate(-50%, -100%) rotate(0deg)',\n borderRadius: `${clockSize * 0.01}px`,\n boxShadow: '0 0 10px rgba(0,0,0,0.2)',\n }}\n />\n\n {/* Center dot */}\n <div\n style={{\n position: 'absolute',\n width: clockSize * 0.05,\n height: clockSize * 0.05,\n backgroundColor: '#333',\n borderRadius: '50%',\n left: '50%',\n top: '50%',\n transform: 'translate(-50%, -50%)',\n boxShadow: '0 0 10px rgba(0,0,0,0.2)',\n }}\n />\n </div>\n\n {/* Text \"4 Hours\" */}\n <div\n ref={textRef}\n style={{\n fontSize: '100px',\n fontWeight: 'bold',\n color: '#ffffff',\n opacity: 0,\n transform: 'translateY(50px)',\n textShadow: '0 0 20px rgba(255,255,255,0.3)',\n fontFamily: 'Arial',\n marginTop: '20px',\n }}\n >\n 4 Hours\n </div>\n </Remotion.AbsoluteFill>\n );\n};"},{name:"Presidential Ballot Animation",url:"https://ai-video-editor-assets.s3.us-west-2.amazonaws.com/video+(7).mp4",message:"Create an animation of a Presidential voting ballot",code:"import * as React from 'react';\n import anime from 'animejs';\n import * as Remotion from 'remotion';\n\n const Component = () => {\n const ballotRef = React.useRef(null);\n const titleRef = React.useRef(null);\n const candidatesRef = React.useRef([]);\n const checkboxesRef = React.useRef([]);\n const checkmarkRef = React.useRef(null);\n const frame = Remotion.useCurrentFrame();\n const { fps } = Remotion.useVideoConfig();\n\n const candidates = [\n \"Kamala Harris\",\n \"Donald Trump\"\n ];\n\n React.useEffect(() =>
1 {\n // Ballot entrance animation\n const ballotAnimation = anime({\n targets: ballotRef.current,\n translateY: [-30, 0],\n opacity: [0, 1],\n duration: 1200,\n easing: 'easeOutExpo',\n autoplay: false\n });\n\n // Title animation\n const titleAnimation = anime({\n targets: titleRef.current,\n opacity: [0, 1],\n translateY: [-20, 0],\n duration: 800,\n delay: 300,\n easing: 'easeOutQuad',\n autoplay: false\n });\n\n // Candidate names animation\n const candidatesAnimation = anime({\n targets: candidatesRef.current,\n opacity: [0, 1],\n translateX: [-20, 0],\n delay: anime.stagger(100, {start: 500}),\n duration: 800,\n easing: 'easeOutQuad',\n autoplay: false\n });\n\n // Checkboxes animation\n const checkboxesAnimation = anime({\n targets: checkboxesRef.current,\n opacity: [0, 1],\n scale: [0.5, 1],\n delay: anime.stagger(100, {start: 500}),\n duration: 800,\n easing: 'easeOutElastic(1, .5)',\n autoplay: false\n });\n\n // Checkmark animation\n const checkmarkAnimation = anime({\n targets: checkmarkRef.current,\n strokeDashoffset: [anime.setDashoffset, 0],\n opacity: [0, 1],\n duration: 1200,\n delay: 1500,\n easing: 'easeOutQuad',\n autoplay: false\n });\n\n // Sync animations with Remotion frame\n ballotAnimation.seek((frame / fps) * 1000);\n titleAnimation.seek((frame / fps) * 1000);\n candidatesAnimation.seek((frame / fps) * 1000);\n checkboxesAnimation.seek((frame / fps) * 1000);\n checkmarkAnimation.seek((frame / fps) * 1000);\n }, [frame, fps]);\n\n return (\n <Remotion.AbsoluteFill\n style={{\n background: 'linear-gradient(135deg, #B31942 0%, rgba(255,255,255,0.9) 50%, #041E42 100%)',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontFamily: 'Georgia, serif',\n }}\n >\n {/* Official Ballot Card */}\n <div\n ref={ballotRef}\n style={{\n width: '80%',\n maxWidth: '900px',\n backgroundColor: '#fff',\n borderRadius: '20px',\n padding: '40px',\n boxShadow: '0 10px 30px rgba(0,0,0,0.2)',\n position: 'relative',\n overflow: 'hidden',\n }}\n >\n {/* Official Seal Watermark */}\n <div\n style={{\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '400px',\n height: '400px',\n background: `\n radial-gradient(circle at center,\n rgba(4, 30, 66, 0.03) 0%,\n transparent 70%\n )\n `,\n borderRadius: '50%',\n pointerEvents: 'none',\n }}\n />\n\n {/* Ballot Header */}\n <div\n ref={titleRef}\n style={{\n textAlign: 'center',\n marginBottom: '40px',\n borderBottom: '2px solid #041E42',\n paddingBottom: '20px',\n }}\n >\n <h1\n style={{\n color: '#041E42',\n fontSize: '48px',\n margin: '0 0 10px 0',\n }}\n >\n OFFICIAL BALLOT\n </h1>\n <h2\n style={{\n color: '#666',\n fontSize: '32px',\n margin: '0',\n fontWeight: '400',\n }}\n >\n 2024 Presidential Election\n </h2>\n </div>\n\n {/* Instructions */}\n <div\n style={{\n backgroundColor: '#f8f9fa',\n padding: '20px',\n borderRadius: '10px',\n marginBottom: '30px',\n border: '1px solid #dee2e6',\n }}\n >\n <p style={{ margin: 0, color: '#495057', fontSize: '24px' }}>
1\n Select ONE candidate by marking the box next to their name.\n </p>\n </div>\n\n {/* Candidates List */}\n <div style={{ marginTop: '30px' }}>\n {candidates.map((candidate, index) => (\n <div\n key={index}\n style={{\n display: 'flex',\n alignItems: 'center',\n marginBottom: '25px',\n padding: '25px',\n borderRadius: '10px',\n backgroundColor: index % 2 === 0 ? '#f8f9fa' : 'white',\n position: 'relative',\n }}\n >\n {/* Checkbox */}\n <div\n ref={el => checkboxesRef.current[index] = el}\n style={{\n width: '50px',\n height: '50px',\n border: '3px solid #041E42',\n borderRadius: '8px',\n marginRight: '30px',\n flexShrink: 0,\n position: 'relative',\n }}\n >\n {/* Checkmark SVG - only for Trump */}\n {index === 1 && (\n <svg\n viewB
1ox=\"0 0 24 24\"\n style={{\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '40px',\n height: '40px',\n }}\n >\n <path\n ref={checkmarkRef}\n d=\"M3 12l7 7 11-11\"\n fill=\"none\"\n stroke=\"#B31942\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n style={{\n opacity: 0,\n }}\n />\n </svg>\n )}\n </div>\n {/* Candidate Name */}\n <span\n ref={el => candidatesRef.current[index] = el}\n style={{\n fontSize: '40px',\n color: '#041E42',\n fontWeight: '500',\n }}\n >\n {candidate}\n </span>\n </div>\n ))}\n </div>\n\n {/* Bottom Notice */}\n <div\n style={{\n marginTop: '40px',\n padding: '20px',\n borderTop: '2px solid #041E42',\n textAlign: 'center',\n color: '#666',\n fontSize: '20px',\n }}\n >\n Thank you for voting. Please review your selection carefully.\n </div>\n </div>\n </Remotion.AbsoluteFill>\n );\n };"},{name:"Hourglass Motiviation",url:"https://ai-video-editor-assets.s3.us-west-2.amazonaws.com/video+(8).mp4",message:"Show an hour glass with the text: Value your Time",code:"import * as React from 'react';\nimport anime from 'animejs';\nimport * as Remotion from 'remotion';\n\nconst Component = () => {\n const frame = Remotion.useCurrentFrame();\n const { fps } = Remotion.useVideoConfig();\n const containerRef = React.useRef(null);\n const textRef = React.useRef(null);\n \n const text = \"Value your Time\";\n const [displayText, setDisplayText] = React.useState(\"\");\n\n React.useEffect(() => {\n // Initial slide up animation for the whole container\n anime({\n targets: containerRef.current,\n translateY: ['100%', '0%'],\n duration: 1000,\n easing: 'easeOutExpo',\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Hourglass animation\n anime({\n targets: '.hourglass-path',\n strokeDashoffset: [anime.setDashoffset, 0],\n easing: 'easeInOutSine',\n duration: 1500,\n delay: 800,\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Inner details animation\n anime({\n targets: '.inner-details',\n strokeDashoffset: [anime.setDashoffset, 0],\n easing: 'easeInOutSine',\n duration: 1500,\n delay: 1100,\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Halo animation\n anime({\n targets: '.halo',\n opacity: [0, 0.6],\n scale: [0.8, 1.1],\n easing: 'easeInOutSine',\n duration: 2000,\n delay: 1000,\n direction: 'alternate',\n loop: true,\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Sand animation\n anime({\n targets: '.sand-particle',\n translateY: [\n { value: 200, duration: 2000 }\n ],\n translateX: function() {\n return anime.random(-15, 15);\n },\n scale: [\n { value: 1, duration: 100 },\n { value: 0.5, duration: 1900 }\n ],\n opacity: [\n { value: 1, duration: 100 },\n { value: 0.8, duration: 1900 }\n ],\n delay: anime.stagger(50, {start: 1200}),\n easing: 'easeInOutQuad',\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n // Typewriter effect\n const framePerChar = 2; // Adjust speed of typing\n const startFrame = 30;
1 // When to start typing\n const currentCharIndex = Math.max(0, Math.floor((frame - startFrame) / framePerChar));\n setDisplayText(text.slice(0, currentCharIndex));\n\n // Cursor blink animation\n anime({\n targets: '.cursor',\n opacity: [1, 0],\n duration: 800,\n easing: 'steps(2)',\n loop: true,\n autoplay: false\n }).seek((frame / fps) * 1000);\n\n }, [frame, fps]);\n\n // Create sand particles\n const sandParticles = new Array(30).fill(0).map((_, index) => (\n <div\n key={index}\n className=\"sand-particle\"\n style={{\n position: 'absolute',\n width: '6px',\n height: '6px',\n backgroundColor: '#FFD700',\n borderRadius: '50%',\n left: `${45 + Math.random() * 10}%`,\n top: '30%',\n opacity: 0,\n filter: 'blur(1px)',\n }}\n />\n ));\n\n return (\n <Remotion.AbsoluteFill\n style={{\n backgroundColor: '#1a1a1a',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden', // Important for slide-up animation\n }}\n >\n <div \n ref={containerRef}\n style={{\n position: 'relative',\n width: '100%',\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n gap: '80px',\n transform: 'translateY(100%)', // Initial position for slide-up\n }}\n >\n {/* Hourglass Container */}\n <div style={{\n position: 'relative',\n marginTop: '-200px',\n }}>\n {/* Halo Effect */}\n <div className=\"halo\" style={{\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '400px',\n height: '400px',\n background: 'radial-gradient(circle, rgba(255,215,0,0.2) 0%, rgba(255,215,0,0) 70%)',\n borderRadius: '50%',\n opacity: 0,\n }} />\n\n <svg\n width=\"300\"\n height=\"400\"\n viewB
1ox=\"0 0 100 150\"\n style={{\n position: 'relative',\n zIndex: 2,\n }}\n >\n {/* Decorative outer frame */}\n <path\n className=\"hourglass-path\"\n d=\"M25,5 L75,5 \n C75,5 80,5 80,10\n L80,40 L50,75 L80,110\n L80,140 C80,145 75,145 75,145\n L25,145 C25,145 20,145 20,140\n L20,110 L50,75 L20,40\n L20,10 C20,5 25,5 25,5\"\n fill=\"none\"\n stroke=\"#FFD700\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n\n {/* Inner details */}\n <g className=\"inner-details\">\n <path\n d=\"M25,5 C25,5 50,15 75,5\"\n fill=\"none\"\n stroke=\"#FFD700\"\n strokeWidth=\"2\"\n opacity=\"0.5\"\n />\n <path\n d=\"M25,145 C25,145 50,135 75,145\"\n fill=\"none\"\n stroke=\"#FFD700\"\n strokeWidth=\"2\"\n opacity=\"0.5\"\n />\n <path\n d=\"M35,75 L65,75\"\n stroke=\"#FFD700\"\n strokeWidth=\"2\"\n opacity=\"0.5\"\n />\n <circle cx=\"50\" cy=\"75\" r=\"3\" fill=\"#FFD700\" opacity=\"0.8\" />\n <circle cx=\"35\" cy=\"75\" r=\"2\" fill=\"#FFD700\" opacity=\"0.6\" />\n <circle cx=\"65\" cy=\"75\" r=\"2\" fill=\"#FFD700\" opacity=\"0.6\" />\n </g>\n </svg>\n\n {/* Sand Particles Container */}\n <div style={{\n position: 'absolute',\n top: 0,\n left: 0,\n width: '300px',\n height: '400px',\n zIndex: 1,\n }}>\n {sandParticles}\n </div>\n </div>\n\n {/* Text with Typewriter Effect */}\n <div\n ref={textRef}\n style={{\n position: 'relative',\n color: '#F
1FD700',\n fontSize: '100px',\n fontFamily: 'SF Pro Display, system-ui',\n fontWeight: 'bold',\n textAlign: 'center',\n width: '100%',\n marginTop: '50px',\n background: 'linear-gradient(180deg, #FFD700 0%, #FFA500 100%)',\n WebkitBackgroundClip: 'text',\n WebkitTextFillColor: 'transparent',\n }}\n >\n {displayText}\n <span className=\"cursor\" style={{\n display: 'inline-block',\n width: '4px',\n height: '80px',\n backgroundColor: '#FFD700',\n marginLeft: '10px',\n verticalAlign: 'middle',\n }}></span>\n </div>\n </div>\n </Remotion.AbsoluteFill>\n );\n};"},{name:"AWS Revenue Pie Chart",url:"https://ai-video-editor-assets.s3.us-west-2.amazonaws.com/video+(10).mp4",message:"Make an animated pie chart showing 30% of Amazon's revenue comes from AWS",code:"import * as React from 'react';\nimport anime from 'animejs';\nimport * as Remotion from 'remotion';\n\nconst Component = () => {\n const arcRef = React.useRef(null);\n const percentageRef = React.useRef(null);\n const titleRef = React.useRef(null);\n const subtitleRef = React.useRef(null);\n const legendRef = React.useRef(null);\n \n const frame = Remotion.useCurrentFrame();\n const { fps } = Remotion.useVideoConfig();\n\n // Calculate SVG arc parameters\n const calculateArc = (percentage) => {\n const radius = 40;\n const circumference = 2 * Math.PI * radius;\n const offset = circumference - (percentage / 100) * circumference;\n return { circumference, offset };\n };\n\n const { circumference, offset } = calculateArc(30);\n\n React.useEffect(() => {\n // Animate the pie chart fill\n const arcAnimation = anime({\n targets: arcRef.current,\n strokeDashoffset: [circumference, offset],\n duration: 1500,\n easing: 'easeOutExpo',\n autoplay: false\n });\n\n // Animate the percentage\n const percentageAnimation = anime({\n targets: percentageRef.current,\n opacity: [0, 1],\n scale: [0.5, 1],\n duration: 1000,\n delay: 300,\n easing: 'easeOutElastic(1, .8)',\n autoplay: false\n });\n\n // Animate the title\n const titleAnimation = anime({\n targets: titleRef.current,\n opacity: [0, 1],\n translateY: [-20, 0],\n duration: 800,\n delay: 500,\n easing: 'easeOutCubic',\n autoplay: false\n });\n\n // Animate the subtitle\n const subtitleAnimation = anime({\n targets: subtitleRef.current,\n opacity: [0, 1],\n translateY: [-20, 0],\n duration: 800,\n delay: 700,\n easing: 'easeOutCubic',\n autoplay: false\n });\n\n // Animate the legend\n const legendAnimation = anime({\n targets: legendRef.current.children,\n opacity: [0, 1],\n translateX: [-20, 0],\n delay: anime.stagger(200, {start: 900}),\n duration: 800,\n easing: 'easeOutCubic',\n autoplay: false\n });\n\n // Sync all animations with Remotion's frame\n arcAnimation.seek((frame / fps) * 1000);\n percentageAnimation.seek((frame / fps) * 1000);\n titleAnimation.seek((frame / fps) * 1000);\n subtitleAnimation.seek((frame / fps) * 1000);\n legendAnimation.seek((frame / fps) * 1000);\n }, [frame, fps, circumference, offset]);\n\n return (\n <Remotion.AbsoluteFill\n style={{\n backgroundColor: '#ffffff',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontFamily: 'SF Pro Display, -apple-system, BlinkMacSystemFont, sans-serif',\n }}\n >\n <div\n style={{\n position: 'relative',\n width: '100%',\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n padding: '60px',\n // Shifted everything up slightly\n transform: 'translateY(-5%)',\n }}\n >\n {/* Title Section - Moved closer to chart */}\n <div\n ref={titleRef}\n style={{\n fontSize: '72px',\n fontWeight: '700',\n color: '#1a202c',\n marginBottom: '8px', // Reduced margin\n textAlign: 'center',\n position: 'relative', // Changed from absolute\n }}\n >\n AWS Revenue Share\n </div>\n\n {/* Subtitle - Moved closer to title */}\n <div\n ref={subtitleRef}\n style={{\n fontSize: '32px',\n color: '#4a5568',\n textAlign: 'center',\n marginBottom: '40px', // Added margin to create space before chart\n position: 'relative', // Changed from absolute\n }}\n >\n of Amazon's Total Revenue\n </div>\n\n {/* Pie Chart Container - Now flows naturally in layout */}\n <div\n style={{\n position: 'relative',\n width: '500px',\n height: '500px',\n marginBottom: '40px', // Added margin for spacing\n }}\n >\n {/* SVG Pie Chart */}
1\n <svg\n viewBox=\"0 0 100 100\"\n style={{\n position: 'absolute',\n width: '100%',\n height: '100%',\n transform: 'rotate(-90deg)',\n }}\n >\n {/* Full circle background (70%) */}\n <circle\n cx=\"50\"\n cy=\"50\"\n r=\"40\"\n fill=\"none\"\n stroke=\"#E2E8F0\"\n strokeWidth=\"12\"\n />\n {/* Highlighted portion (30%) */}\n <circle\n ref={arcRef}\n cx=\"50\"\n cy=\"50\"\n r=\"40\"\n fill=\"none\"\n stroke=\"#FF9900\"\n strokeWidth=\"12\"\n strokeDasharray={circumference}\n strokeDashoffset={circumference}\n strokeLinecap=\"round\"\n />\n </svg>\n\n {/* Percentage Display */}\n <div\n ref={percentageRef}\n style={{\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n fontSize: '120px',\n fontWeight: '700',\n color: '#F
1F9900',\n textShadow: '0 4px 12px rgba(255, 153, 0, 0.2)',\n }}\n >\n 30%\n </div>\n </div>\n\n {/* Legend - Now flows with layout */}\n <div\n ref={legendRef}\n style={{\n display: 'flex',\n justifyContent: 'center',\n gap: '40px',\n background: 'rgba(255, 255, 255, 0.9)',\n padding: '20px 40px',\n borderRadius: '16px',\n boxShadow: '0 4px 20px rgba(0, 0, 0, 0.05)',\n position: 'relative', // Changed from absolute\n }}\n >\n <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>\n <div\n style={{\n width: '24px',\n height: '24px',\n backgroundColor: '#FF9900',\n borderRadius: '6px',\n }}\n />\n <span style={{ fontSize: '24px', color: '#2d3748', fontWeight: '500' }}>AWS Revenue (30%)</span>\n </div>\n <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>\n <div\n style={{\n width: '24px',\n height: '24px',\n backgroundColor: '#E2E8F0',\n borderRadius: '6px',\n }}\n />\n <span style={{ fontSize: '24px', color: '#2d3748', fontWeight: '500' }}>Other Revenue (70%)</span>\n </div>\n </div>\n\n {/* Decorative Gradients */}\n <div\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n height: '200px',\n background: 'linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%)',\n pointerEvents: 'none',\n }}\n />\n <div\n style={{\n position: 'absolute',\n bottom: 0,\n left: 0,\n right: 0,\n height: '200px',\n background: 'linear-gradient(0deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%)',\n pointerEvents: 'none',\n }}\n />\n </div>\n </Remotion.AbsoluteFill>\n );\n};"}];var s=t(93967),l=t.n(s),c=t(78361),d=t(58192),f=t(11163);function p(n){let{user:e}=n,t=(0,f.useRouter)(),s=(0,d.U0)(),p=async n=>{if(e){let e=r[n],a=await (0,c.kV)({name:e.name,code:e.code,message:e.message});s.capture("[LazyAnimator] Creating from Template",{id:a}),t.push("/editor/".concat(a))}else t.push("/login")};return(0,a.jsx)("div",{className:"container mx-auto px-4 pt-4 pb-8",children:(0,a.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",children:r.map((n,e)=>(0,a.jsx)(i.Zb,{className:l()("mb-2 hover:shadow-md hover:cursor-pointer"),onClick:()=>p(e),children:(0,a.jsxs)(i.aY,{className:"p-2 bg-slate-50 rounded flex flex-col gap-2",children:[(0,a.jsx)("video",{src:n.url,autoPlay:!0,loop:!0,muted:!0,playsInline:!0,width:"100%",height:"auto",className:"w-full h-full object-cover rounded-sm"}),(0,a.jsx)(o.z,{children:"Duplicate this Template"})]})},e))})})}},89346:function(n,e,t){t.d(e,{Ol:function(){return s},Zb:function(){return r},aY:function(){return c},eW:function(){return d},ll:function(){return l}});var a=t(85893),i=t(67294),o=t(94777);let r=i.forwardRef((n,e)=>{let{className:t,...i}=n;return(0,a.jsx)("div",{ref:e,className:(0,o.cn)("rounded-xl border bg-card text-card-foreground shadow",t),...i})});r.displayName="Card";let s=i.forwardRef((n,e)=>{let{className:t,...i}=n;return(0,a.jsx)("div",{ref:e,className:(0,o.cn)("flex flex-col space-y-1.5 p-6",t),...i})});s.displayName="CardHeader";let l=i.forwardRef((n,e)=>{let{className:t,...i}=n;return(0,a.jsx)("h3",{ref:e,className:(0,o.cn)("font-semibold leading-none tracking-tight",t),...i})});l.displayName="CardTitle",i.forwardRef((n,e)=>{let{className:t,...i}=n;return(0,a.jsx)("p",{ref:e,className:(0,o.cn)("text-sm text-muted-foreground",t),...i})}).displayName="CardDescription";let c=i.forwardRef((n,e)=>{let{className:t,...i}=n;return(0,a.jsx)("div",{ref:e,className:(0,o.cn)("p-6 pt-0",t),...i})});
1c.displayName="CardContent";let d=i.forwardRef((n,e)=>{let{className:t,...i}=n;return(0,a.jsx)("div",{ref:e,className:(0,o.cn)("flex items-center p-6 pt-0",t),...i})});d.displayName="CardFooter"}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.