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

More like this

Cyber Monday Sale Ad Video

15% Off Promotion Video

High-Fashion Coming Soon Promo Video

What's in My Bag Video Reveal

New Arrival Video

Winter Collection Promo Video

Social Media Ad Video

Fashion Promo Video with Dynamic Slide Animations

Recreate Denim Fashion Promo Video

Luxury Jewelry Sale Ad

Jewelry Brand Promo Video

Fashion Collection Promo Video with Carousel

Fashion Promo

Fashion Sale Promo Video

Fashion Sale Video

Fashion Promo for New Collection

Animated Grid Video Template

Fashion Collection Promo Video

Skincare Product Showcase with Stock Video

Elegant Watch Ad Video