import React from 'react'; import { AbsoluteFill, useCurrentFrame, interpolate, Easing, } from 'remotion'; import { loadFont } from '@remotion/google-fonts/Poppins'; import { loadFont as loadInter } from '@remotion/google-fonts/Inter'; import { iconMap } from './icons'; const { fontFamily: poppins } = loadFont('normal', { weights: ['600'], }); const { fontFamily: inter } = loadInter('normal', { weights: ['400', '500'], }); const containerStyle: React.CSSProperties = { display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F8F9F7', fontFamily: inter, }; const logoStyle: React.CSSProperties = { fontFamily: poppins, fontSize: '100px', fontWeight: '600', color: '#1A4E48', marginBottom: '50px', }; const searchBarStyle: React.CSSProperties = { width: '1100px', backgroundColor: 'white', borderRadius: '30px', border: '2px solid #DCDEDD', padding: '16px', boxShadow: '0 6px 25px rgba(0, 0, 0, 0.05)', display: 'flex', flexDirection: 'column', }; const searchInputArea: React.CSSProperties = { display: 'flex', alignItems: 'center', padding: '16px', }; const textInputStyle: React.CSSProperties = { flexGrow: 1, fontSize: '34px', color: '#8A8D8C', border: 'none', outline: 'none', backgroundColor: 'transparent', marginLeft: '16px', position: 'relative', height: '40px', }; const cursorStyle: React.CSSProperties = { width: '3px', height: '38px', backgroundColor: '#1A4E48', display: 'inline-block', verticalAlign: 'middle', marginLeft: '4px', }; const bottomRowStyle: React.CSSProperties = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '16px', padding: '0 16px', }; const iconGroupStyle: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: '16px', }; const leftIconContainerStyle: React.CSSProperties = { display: 'flex', alignItems: 'center', backgroundColor: '#EAECEB', borderRadius: '20px', padding: '10px', gap: '16px', }; const rightIconContainerStyle: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: '20px', }; const searchIconContainerStyle: React.CSSProperties = { color: '#1A4E48', backgroundColor: 'white', padding: '6px', borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1.5px solid #DCDEDD', }; const voiceButtonStyle: React.CSSProperties = { backgroundColor: '#329997', color: 'white', borderRadius: '16px', padding: '16px', display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer', }; const suggestionButtonsStyle: React.CSSProperties = { display: 'flex', gap: '20px', marginTop: '40px', }; const suggestionButtonStyle: React.CSSProperties = { backgroundColor: '#EAECEB', color: '#5C5F5E', border: 'none', borderRadius: '16px', padding: '12px 22px', display: 'flex', alignItems: 'center', gap: '10px', fontSize: '24px', fontWeight: 500, }; const queryText = 'How to make a video with AI?'; const suggestionButtons = [ 'Compare', 'Troubleshoot', 'Reerollity 101', 'Health', 'Fact Check', ]; export const AnimatedSearchBar: React.FC = () => { const frame = useCurrentFrame(); const durationInFrames = 120; // Scene duration shortened const introAnimation = (startFrame: number) => { const animDuration = 20; const opacity = interpolate(frame, [startFrame, startFrame + animDuration], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const blur = interpolate(frame, [startFrame, startFrame + animDuration], [10, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return { opacity, filter: `blur(${blur}px)` }; }; const sceneExitAnimation = () => { const exitStart = 105; const opacity = interpolate( frame, [exitStart, durationInFrames], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', } ); const blur = interpolate(frame, [exitStart, durationInFrames], [0, 10], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return { opacity, filter: `blur(${blur}px)` }; }; const mainScale = interpolate(frame, [0, 20], [0.95, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.back(1.7)), }); const placeholderOpacity = interpolate(frame, [25, 35], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const typingProgress = interpolate(frame, [40, 85], [0, queryText.length], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const typedText = queryText.slice(0, Math.floor(typingProgress)); const cursorBlink = interpolate(Math.floor(frame / 8) % 2, [0, 1], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const cursorOpacity = frame > 39 && frame < 90 ? cursorBlink : 0; const submitScale = interpolate(frame, [95, 100, 105, 110], [1, 0.9, 0.9, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.back(2)), }); const sceneExitStyle = sceneExitAnimation(); return (

Reerollity

This video was one made using Reeroll {typedText}

{iconMap.Search} {iconMap.Focus} {iconMap.Question}

{iconMap.Chip} {iconMap.Globe} {iconMap.Link} {iconMap.Mic}

{frame < 40 ? iconMap.Voice : iconMap.ArrowUp}

{suggestionButtons.map((text, i) => ( ))}

); };

Reeroll has shut down