import { AbsoluteFill, Series, useCurrentFrame, useVideoConfig, interpolate, spring, random, Img, Audio, } from 'remotion'; import {loadFont} from '@remotion/google-fonts/Inter'; import React from 'react'; import {DotGrid} from './components/DotGrid'; import {NotificationCard} from './components/NotificationCard'; const {fontFamily} = loadFont('normal', { weights: ['400', '500', '600', '700'], }); const COLORS = { background: '#F7F7F7', text: '#111111', brand: '#4F46E5', lightGray: '#E0E0E0', white: '#FFFFFF', red: '#FF3B30', }; const commonTextStyle: React.CSSProperties = { fontFamily, color: COLORS.text, textAlign: 'center', }; const LogoIcon = ({size = 80}: {size?: number}) => (

); const Scene1 = () => { const frame = useCurrentFrame(); const {fps} = useVideoConfig(); const notifications = [ { name: 'Alex Smith', message: 'Can you review this PR?', sourceIcon: (

), }, { name: 'Sarah Lee', message: 'New message in #general', sourceIcon: (

), }, { name: 'Project Manager', message: 'Task "Deploy to Prod" is due', sourceIcon: (

), }, ]; const stackProgress = spring({ frame: frame - 60, fps, config: {stiffness: 120, damping: 12, mass: 0.8}, }); return ( {notifications.map((n, i) => (

))}

99+

); }; const Scene2 = () => { const frame = useCurrentFrame(); const {fps} = useVideoConfig(); const text1 = 'Notifications everywhere?'; const text2StartFrame = 45; const text1Spring = spring({ frame, fps, config: {stiffness: 150, damping: 15, mass: 0.9}, }); const text2Spring = spring({ frame: frame - text2StartFrame, fps, config: {stiffness: 150, damping: 15, mass: 0.9}, }); return (

{text1}

Losing your focus?

); }; const Logo = () => (

Acmefy

); const Scene3 = () => { const frame = useCurrentFrame(); const {fps} = useVideoConfig(); const springConfig = {stiffness: 150, damping: 12, mass: 0.8}; const meetSpring = spring({frame, fps, config: springConfig}); const meetOpacity = interpolate(meetSpring, [0, 1], [0, 1]) * interpolate(frame, [30, 45], [1, 0], {extrapolateRight: 'clamp'}); const logoSpring = spring({frame: frame - 45, fps, config: springConfig}); const tagline1Spring = spring({frame: frame - 60, fps, config: springConfig}); const tagline2Spring = spring({frame: frame - 80, fps, config: springConfig}); return (

Meet

All your notifications.

One inbox.

); }; const FloatingLogo: React.FC<{ src: string; seed: string; startAngle: number; radius: number; delay: number; size: number; }> = ({src, seed, startAngle, radius, delay, size}) => { const frame = useCurrentFrame(); const {fps} = useVideoConfig(); const angle = startAngle + (frame - delay) / 50; const x = Math.cos(angle) * radius + random(seed + 'x') * 100 - 50; const y = Math.sin(angle) * radius + random(seed + 'y') * 100 - 50; const anim = spring({ frame: frame - delay, fps, config: {stiffness: 100, damping: 15}, }); return (

); }; const Scene4 = () => { const frame = useCurrentFrame(); const {fps} = useVideoConfig(); const logos = [ { src: 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/2d85fbcd-f0c2-4baf-929a-d993dc8f53d0/1qIO1nAW5z', seed: 'a', angle: 0, radius: 440, size: 80, }, // Slack { src: 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/2d85fbcd-f0c2-4baf-929a-d993dc8f53d0/lfXJv2ZPBB', seed: 'b', angle: 1, radius: 480, size: 80, }, // Gmail { src: 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/2d85fbcd-f0c2-4baf-929a-d993dc8f53d0/ENCfP46wpT', seed: 'c', angle: 2, radius: 460, size: 80, }, // Jira { src: 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/2d85fbcd-f0c2-4baf-929a-d993dc8f53d0/8BJPyCOZFN', seed: 'd', angle: 3, radius: 440, size: 80, }, // GitHub { src: 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/2d85fbcd-f0c2-4baf-929a-d993dc8f53d0/HQNVtqwAPF', seed: 'e', angle: 4, radius: 480, size: 80, }, // Discord { src: 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/2d85fbcd-f0c2-4baf-929a-d993dc8f53d0/1GOYbTHZ8_', seed: 'f', angle: 5, radius: 460, size: 80, }, // Asana ]; const textAnim = spring({ frame, fps, config: {stiffness: 150, damping: 15}, }); return (

{logos.map((logo, i) => ( ))}

Connects with all
your{' '} favorite tools

); }; const Scene5 = () => { const AnimatedText: React.FC<{children: React.ReactNode}> = ({children}) => { const frame = useCurrentFrame(); const {fps} = useVideoConfig(); const anim = spring({ frame, fps, config: {stiffness: 120, damping: 15, mass: 0.8}, }); const opacity = interpolate(frame, [0, 20], [0, 1]); return (

{children}

); }; return ( So you can stop chasing notifications... ...and{' '} focus on what matters. ); }; const OutroScene = () => { const frame = useCurrentFrame(); const {fps} = useVideoConfig(); const anim = spring({ frame, fps, config: {stiffness: 120, damping: 15}, }); return ( ); }; export const ReerollVideo: React.FC = () => { return (

); };

Acmefy Notification Management Promo