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) => ( ))}

); };

Animated Search Bar UI Design & Animation

More like this

High-Fashion Coming Soon Promo Video

Social Media Marketing Services Promo Video

Food Promo Video

Healthy Food Menu Promo Video

Soda Product Showcase

Animated Service Showcase Video

Reeroll App Demo Video

Hiring Video

Animated Logo & Typeface Reveal

Logo animation

Animated Sale Offer Promo Video with Palm Shadow

Black Friday Sale

Animated Discount

Reeroll Logo animation

Custom Bouncing DVD Logo Animation

Reeroll AI: Business Video Marketing Promo

Acme Whitelabel Video Template

Digital Marketing Services Promo Video

Airbnb App Demo Tutorial

AI Product Promo Video for Reddit Post