Last active
August 12, 2022 21:19
-
-
Save willhalling/795470046f457456920dfcb4ae4e42e3 to your computer and use it in GitHub Desktop.
Remotion Jumpy video
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Audio, AbsoluteFill, interpolate, Sequence, useCurrentFrame, Video, useVideoConfig} from 'remotion'; | |
| import logo from "../assets/gt/gt-logo-black-bg.svg"; | |
| // @ts-ignore | |
| import {QuoteBox} from "./components/quote-box/QuoteBox"; | |
| import videoBg from "../assets/gt/video/ocean-92550.mp4"; | |
| import audioBg from "../assets/gt/audio/meditation/a-new-day.mp3"; | |
| import {Location} from "./components/location/Location"; | |
| export const GtMeditation: React.FC<{ | |
| title: string; | |
| width: number; | |
| height: number; | |
| quotes: any; | |
| }> = ({title, width, height, quotes}) => { | |
| const f = useCurrentFrame(); | |
| const seconds = (f / 30).toFixed() | |
| const { durationInFrames } = useVideoConfig(); | |
| const logoOpacity = interpolate( | |
| f, | |
| [60, 120, durationInFrames - 150, durationInFrames], | |
| // V--v---v----------------------v | |
| [1, 0.5, 0.5, 1], | |
| { | |
| extrapolateRight: 'clamp', | |
| extrapolateLeft: 'clamp' | |
| } | |
| ); | |
| const textOpacity = interpolate( | |
| f, | |
| [60, 120, durationInFrames - 150, durationInFrames], | |
| // V--v---v----------------------v | |
| [0, 0.5, 0.5, 0], | |
| { | |
| extrapolateRight: 'clamp', | |
| extrapolateLeft: 'clamp' | |
| } | |
| ); | |
| // Fade out volume within last 3 seconds of last frame | |
| const fadeOutVolume = interpolate(f, [durationInFrames - 150, durationInFrames], [0.9, 0], { | |
| extrapolateRight: 'clamp', | |
| extrapolateLeft: 'clamp' | |
| }); | |
| const realData = [ | |
| { | |
| "duration": 150, | |
| "from": 30, | |
| "seconds": 5 | |
| }, | |
| { | |
| "duration": 300, | |
| "from": 220, | |
| "seconds": 10 | |
| }, | |
| { | |
| "duration": 300, | |
| "from": 570, | |
| "seconds": 10 | |
| }, | |
| { | |
| "duration": 420, | |
| "from": 930, | |
| "seconds": 14 | |
| }, | |
| { | |
| "duration": 840, | |
| "from": 1550, | |
| "seconds": 28 | |
| }, | |
| { | |
| "duration": 390, | |
| "from": 2790, | |
| "seconds": 13 | |
| }, | |
| { | |
| "duration": 300, | |
| "from": 3780, | |
| "seconds": 10 | |
| }, | |
| { | |
| "duration": 390, | |
| "from": 4680, | |
| "seconds": 13 | |
| }, | |
| { | |
| "duration": 630, | |
| "from": 5670, | |
| "seconds": 21 | |
| }, | |
| { | |
| "duration": 360, | |
| "from": 6900, | |
| "seconds": 12 | |
| }, | |
| { | |
| "duration": 330, | |
| "from": 7320, | |
| "seconds": 11 | |
| }, | |
| { | |
| "duration": 210, | |
| "from": 7710, | |
| "seconds": 7 | |
| }, | |
| { | |
| "duration": 480, | |
| "from": 7980, | |
| "seconds": 16 | |
| }, | |
| { | |
| "duration": 330, | |
| "from": 8520, | |
| "seconds": 11 | |
| } | |
| ] | |
| return ( | |
| <> | |
| <AbsoluteFill style={{backgroundColor: 'black'}}> | |
| <Sequence from={0} durationInFrames={durationInFrames}> | |
| <Video src={videoBg} /> | |
| <Audio | |
| src={audioBg} | |
| startFrom={0} | |
| endAt={durationInFrames} | |
| volume={0.5} | |
| /> | |
| <img | |
| width={width} | |
| height={height} | |
| style={{ | |
| position: 'absolute', | |
| left: '0px', | |
| top: '0px', | |
| opacity: logoOpacity | |
| }} | |
| src={logo} | |
| /> | |
| </Sequence> | |
| </AbsoluteFill> | |
| <Sequence from={90} durationInFrames={210}> | |
| <div style={{ | |
| position: 'absolute', | |
| bottom: '6.25rem', | |
| left: '50%', | |
| transform: `translateX(-50%)` | |
| }}> | |
| <Location type="url" text="GratefulToday.com" /> | |
| </div> | |
| </Sequence> | |
| <Sequence from={30} durationInFrames={durationInFrames}> | |
| <div style={{ | |
| opacity: textOpacity | |
| }}> | |
| <div style={{ | |
| position: 'absolute', | |
| top: '-20rem', | |
| }}> | |
| <QuoteBox quote="5 minute Gratitude Meditation" color="white" letterSpacing="0.75rem" fontFamily="Viva Beautiful" fontSize="72px" width={width} height={height} /> | |
| </div> | |
| </div> | |
| </Sequence> | |
| {realData.map((item, i) => ( | |
| <Sequence key={i} from={item.from} durationInFrames={item.duration}> | |
| <Audio | |
| src={require('../assets/gt/audio/meditation/' + i + '.mp3')} | |
| startFrom={0} | |
| endAt={item.duration} | |
| volume={1} | |
| /> | |
| </Sequence> | |
| ))} | |
| </> | |
| ); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment