import React from 'react'; import { AbsoluteFill, Series, useCurrentFrame, useVideoConfig, interpolate, spring, random, Img, } from 'remotion'; import { Chart } from './components/Chart'; import { commonTextStyle, COLORS, fontFamily } from './main'; import { Check, Users, LineChart, Database, PlaySquare } from 'lucide-react'; const LogoIcon = () => (

); const Logo = () => (

Trixpanel

); export const Scene1 = () => { const frame = useCurrentFrame(); const { fps, durationInFrames } = useVideoConfig(); const chartData = [0.3, 0.5, 0.4, 0.7, 0.6, 0.9, 0.8].map( (d, i) => d + random(i) * 0.1 ); const sceneDuration = 90; const opacity = interpolate(frame, [sceneDuration - 20, sceneDuration], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const textOpacity = spring({ frame: frame - 15, fps, config: { stiffness: 100 }, }); const textScale = spring({ frame: frame - 15, fps, config: { stiffness: 100, damping: 10 }, }); return (

Data is everywhere...

); }; export const Scene2 = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const text1 = 'But are you getting answers?'; 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}

Or just more questions?

); }; export 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 taglineSpring = spring({ frame: frame - 60, fps, config: springConfig }); return (

Meet

The analytics platform that turns data into decisions.

); }; const FeatureCard: React.FC<{ icon: React.ReactNode; text: string; delay: number; }> = ({ icon, text, delay }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const anim = spring({ frame: frame - delay, fps, config: { stiffness: 120, damping: 15 }, }); return (

{icon}

{text}

); }; export const Scene4 = () => { const features = [ { icon: , text: 'Product Analytics', delay: 0 }, { icon: , text: 'Session Replay', delay: 15 }, { icon: , text: 'Data Warehouse Sync', delay: 30 }, { icon: , text: 'Group Analytics', delay: 45 }, ]; return (

{features.map((feat) => ( ))}

); }; export 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 guessing... ...and start measuring. ); }; export const OutroScene = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const anim = spring({ frame, fps, config: { stiffness: 120, damping: 15 }, }); return ( ); };

Trixpanel template