├── .dockerignore ├── .eslintrc ├── src ├── HelloWorld │ ├── config.ts │ ├── Subtitle.tsx │ ├── Atom.tsx │ ├── Title.tsx │ ├── Arc.tsx │ └── Logo.tsx ├── index.tsx ├── LoveDeathReact │ ├── Icons │ │ ├── Cyclop.tsx │ │ ├── X.tsx │ │ ├── Robot.tsx │ │ ├── Pyramid.tsx │ │ ├── Mute.tsx │ │ ├── Eye.tsx │ │ ├── Skull.tsx │ │ ├── Evil.tsx │ │ ├── Sadomazofembotochist.tsx │ │ ├── Box.tsx │ │ ├── Cat.tsx │ │ └── Heart.tsx │ ├── Background.tsx │ ├── Rotation.tsx │ ├── Dots2.tsx │ ├── Circle.tsx │ ├── SignsDark.tsx │ ├── LoveDeathReact.tsx │ ├── Rect.tsx │ ├── index.tsx │ ├── Dots.tsx │ ├── ReactLogo.tsx │ ├── Roulette.tsx │ ├── Focus.tsx │ ├── LogoLight.tsx │ ├── Icons.tsx │ ├── SignsLight.tsx │ ├── MainTitle.tsx │ └── Title.tsx ├── Video.tsx ├── HelloWorld.tsx └── components │ └── Redash.tsx ├── remotion.config.ts ├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── tsconfig.json ├── .github └── workflows │ └── render-video.yml ├── package.json ├── Dockerfile ├── README.md └── server.tsx /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@remotion" 3 | } 4 | -------------------------------------------------------------------------------- /src/HelloWorld/config.ts: -------------------------------------------------------------------------------- 1 | export const COLOR_1 = '#86A8E7'; 2 | export const COLOR_2 = '#91EAE4'; 3 | -------------------------------------------------------------------------------- /remotion.config.ts: -------------------------------------------------------------------------------- 1 | import {Config} from 'remotion'; 2 | 3 | Config.Rendering.setImageFormat('jpeg'); 4 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import {registerRoot} from 'remotion'; 2 | import {RemotionVideo} from './Video'; 3 | 4 | registerRoot(RemotionVideo); 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_Store 4 | 5 | # Ignore the output video from Git but not videos you import into src/. 6 | *.mp4 7 | !src**/*.mp4 8 | *.mp3 9 | !src**/*.mp3 10 | *.webm 11 | !src**/*.webm 12 | *.aac 13 | !src**/*.aac 14 | *.wav 15 | !src**/*.wav 16 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "bracketSpacing": false, 4 | "jsxBracketSameLine": false, 5 | "useTabs": true, 6 | "overrides": [ 7 | { 8 | "files": ["*.yml"], 9 | "options": { 10 | "singleQuote": false 11 | } 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.tabSize": 2, 3 | "java.configuration.updateBuildConfiguration": "disabled", 4 | "typescript.tsdk": "node_modules/typescript/lib", 5 | "editor.codeActionsOnSave": { 6 | "source.organizeImports": false, 7 | "source.fixAll": true 8 | }, 9 | "typescript.enablePromptUseWorkspaceTsdk": true 10 | } 11 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2018", 4 | "module": "commonjs", 5 | "jsx": "react-jsx", 6 | "outDir": "./dist", 7 | "strict": true, 8 | "noEmit": true, 9 | "lib": ["es2015", "DOM"], 10 | "esModuleInterop": true, 11 | "skipLibCheck": true, 12 | "forceConsistentCasingInFileNames": true 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Icons/Cyclop.tsx: -------------------------------------------------------------------------------- 1 | const Cyclop = () => { 2 | return ( 3 | 11 | 16 | 17 | ); 18 | }; 19 | 20 | export default Cyclop; 21 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Background.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { StyleSheet, View } from "react-native"; 3 | 4 | const styles = StyleSheet.create({ 5 | container: { 6 | ...StyleSheet.absoluteFillObject, 7 | backgroundImage: "radial-gradient(#F0E6E0 61%, #8B918D);", 8 | filter: "blur(40px)", 9 | }, 10 | }); 11 | 12 | const Background = () => { 13 | return ( 14 | 15 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default Background; 22 | -------------------------------------------------------------------------------- /src/HelloWorld/Subtitle.tsx: -------------------------------------------------------------------------------- 1 | import {interpolate, useCurrentFrame} from 'remotion'; 2 | import {COLOR_1} from './config'; 3 | 4 | export const Subtitle: React.FC = () => { 5 | const frame = useCurrentFrame(); 6 | const opacity = interpolate(frame, [0, 30], [0, 1]); 7 | return ( 8 |
19 | Edit{' '} 20 | 25 | src/Video.tsx 26 | {' '} 27 | and save to reload. 28 |
29 | ); 30 | }; 31 | -------------------------------------------------------------------------------- /src/HelloWorld/Atom.tsx: -------------------------------------------------------------------------------- 1 | import {useVideoConfig} from 'remotion'; 2 | import {COLOR_1, COLOR_2} from './config'; 3 | 4 | export const Atom: React.FC<{ 5 | scale: number; 6 | }> = ({scale}) => { 7 | const config = useVideoConfig(); 8 | return ( 9 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 28 | 29 | ); 30 | }; 31 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Icons/X.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | const X = () => { 3 | return ( 4 | 11 | 15 | 19 | 20 | ); 21 | }; 22 | 23 | export default X; 24 | -------------------------------------------------------------------------------- /src/Video.tsx: -------------------------------------------------------------------------------- 1 | import { Composition } from "remotion"; 2 | 3 | import LoveDeathReact from "./LoveDeathReact"; 4 | 5 | export const RemotionVideo = () => { 6 | return ( 7 | <> 8 | 16 | 17 | ); 18 | }; 19 | 20 | /* 21 | 22 | 30 | 38 | */ 39 | -------------------------------------------------------------------------------- /.github/workflows/render-video.yml: -------------------------------------------------------------------------------- 1 | on: 2 | workflow_dispatch: 3 | inputs: 4 | titleText: 5 | description: "Which text should it say?" 6 | required: true 7 | default: "Welcome to Remotion" 8 | titleColor: 9 | description: "Which color should it be in?" 10 | required: true 11 | default: "black" 12 | name: Render video 13 | jobs: 14 | render: 15 | name: Render video 16 | runs-on: ubuntu-latest 17 | steps: 18 | - uses: actions/checkout@main 19 | - uses: actions/setup-node@main 20 | - run: sudo apt update 21 | - run: sudo apt install ffmpeg 22 | - run: npm i 23 | - run: npm run build -- --props="$WORKFLOW_INPUT" 24 | env: 25 | WORKFLOW_INPUT: ${{ toJson(github.event.inputs) }} 26 | - uses: actions/upload-artifact@v2 27 | with: 28 | name: out.mp4 29 | path: out.mp4 30 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Icons/Robot.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | 3 | const Robot = () => { 4 | return ( 5 | 12 | 17 | 18 | ); 19 | }; 20 | 21 | export default Robot; 22 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Icons/Pyramid.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | const Pyramid = () => { 3 | return ( 4 | 11 | 17 | 18 | ); 19 | }; 20 | 21 | export default Pyramid; 22 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Icons/Mute.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | 3 | const Mute = () => { 4 | return ( 5 | 12 | 17 | 18 | ); 19 | }; 20 | 21 | export default Mute; 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "remotion-template", 3 | "version": "1.0.0", 4 | "description": "My Remotion video", 5 | "scripts": { 6 | "start": "remotion preview src/index.tsx", 7 | "build": "remotion render src/index.tsx HelloWorld out.mp4", 8 | "upgrade": "remotion upgrade", 9 | "server": "ts-node server.tsx", 10 | "test": "eslint src --ext ts,tsx,js,jsx && tsc" 11 | }, 12 | "repository": {}, 13 | "license": "UNLICENSED", 14 | "dependencies": { 15 | "@remotion/bundler": "^2.0.0", 16 | "@remotion/cli": "^2.0.0", 17 | "@remotion/eslint-config": "^2.0.0", 18 | "@remotion/renderer": "^2.0.0", 19 | "@types/express": "^4.17.9", 20 | "@types/react": "^17.0.0", 21 | "eslint": "^7.15.0", 22 | "express": "^4.17.1", 23 | "prettier": "^2.2.1", 24 | "prettier-plugin-organize-imports": "^1.1.1", 25 | "react": "^17.0.2", 26 | "react-dom": "^17.0.2", 27 | "react-native-web": "^0.16.3", 28 | "remotion": "^2.0.0", 29 | "svg-path-properties": "^1.0.11", 30 | "ts-node": "^9.1.1", 31 | "typescript": "^4.2.3" 32 | }, 33 | "devDependencies": { 34 | "@types/react-native": "^0.64.5" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # This is a dockerized version of a server that you can easily deploy somewhere. 2 | # If you don't want server rendering, you can safely delete this file. 3 | 4 | FROM node:alpine 5 | 6 | # Installs latest Chromium (85) package. 7 | RUN apk add --no-cache \ 8 | chromium \ 9 | nss \ 10 | freetype \ 11 | freetype-dev \ 12 | harfbuzz \ 13 | ca-certificates \ 14 | ttf-freefont \ 15 | ffmpeg 16 | 17 | # Tell Puppeteer to skip installing Chrome. We'll be using the installed package. 18 | ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \ 19 | PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser 20 | 21 | COPY package*.json ./ 22 | COPY tsconfig.json ./ 23 | COPY src src 24 | COPY *.ts . 25 | COPY *.tsx . 26 | 27 | RUN npm i 28 | 29 | # Add user so we don't need --no-sandbox. 30 | RUN addgroup -S pptruser && adduser -S -g pptruser pptruser \ 31 | && mkdir -p /home/pptruser/Downloads /app \ 32 | && chown -R pptruser:pptruser /home/pptruser \ 33 | && chown -R pptruser:pptruser /app 34 | # Run everything after as non-privileged user. 35 | USER pptruser 36 | 37 | EXPOSE 8000 38 | 39 | CMD ["npm", "run", "server"] 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Remotion video 2 | 3 |

4 | 5 | 6 | 7 |

8 | 9 | Welcome to your Remotion project! 10 | 11 | ## Commands 12 | 13 | **Start Preview** 14 | 15 | ```console 16 | npm start 17 | ``` 18 | 19 | **Render video** 20 | 21 | ```console 22 | npm run build 23 | ``` 24 | 25 | **Server render demo** 26 | 27 | ```console 28 | npm run server 29 | ``` 30 | 31 | See [docs for server-side rendering](https://www.remotion.dev/docs/ssr) here. 32 | 33 | **Upgrade Remotion** 34 | 35 | ```console 36 | npm run upgrade 37 | ``` 38 | 39 | ## Docs 40 | 41 | Get started with Remotion by reading the [fundamentals page](https://www.remotion.dev/docs/the-fundamentals). 42 | 43 | ## Issues 44 | 45 | Found an issue with Remotion? [File an issue here](https://github.com/JonnyBurger/remotion/issues/new). 46 | 47 | ## License 48 | 49 | Notice that for some entities a company license is needed. Read [the terms here](https://github.com/JonnyBurger/remotion/blob/main/LICENSE.md). 50 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Icons/Eye.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | const Eye = () => { 3 | return ( 4 | 11 | 16 | 17 | ); 18 | }; 19 | 20 | export default Eye; 21 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Icons/Skull.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | const Skull = () => { 3 | return ( 4 | 11 | 16 | 17 | ); 18 | }; 19 | 20 | export default Skull; 21 | -------------------------------------------------------------------------------- /src/HelloWorld/Title.tsx: -------------------------------------------------------------------------------- 1 | import {spring, useCurrentFrame, useVideoConfig} from 'remotion'; 2 | 3 | export const Title: React.FC<{ 4 | titleText: string; 5 | titleColor: string; 6 | }> = ({titleText, titleColor}) => { 7 | const videoConfig = useVideoConfig(); 8 | const frame = useCurrentFrame(); 9 | const text = titleText.split(' ').map((t) => ` ${t} `); 10 | return ( 11 |

22 | {text.map((t, i) => { 23 | return ( 24 | 42 | {t} 43 | 44 | ); 45 | })} 46 |

47 | ); 48 | }; 49 | -------------------------------------------------------------------------------- /src/HelloWorld.tsx: -------------------------------------------------------------------------------- 1 | import {interpolate, Sequence, useCurrentFrame, useVideoConfig} from 'remotion'; 2 | import {Logo} from './HelloWorld/Logo'; 3 | import {Subtitle} from './HelloWorld/Subtitle'; 4 | import {Title} from './HelloWorld/Title'; 5 | 6 | export const HelloWorld: React.FC<{ 7 | titleText: string; 8 | titleColor: string; 9 | }> = ({titleText, titleColor}) => { 10 | const frame = useCurrentFrame(); 11 | const videoConfig = useVideoConfig(); 12 | 13 | const opacity = interpolate( 14 | frame, 15 | [videoConfig.durationInFrames - 25, videoConfig.durationInFrames - 15], 16 | [1, 0], 17 | { 18 | extrapolateLeft: 'clamp', 19 | extrapolateRight: 'clamp', 20 | } 21 | ); 22 | const transitionStart = 25; 23 | 24 | return ( 25 |
26 |
27 | 28 | 29 | 30 | 31 | 32 | </Sequence> 33 | <Sequence from={transitionStart + 50} durationInFrames={Infinity}> 34 | <Subtitle /> 35 | </Sequence> 36 | </div> 37 | </div> 38 | ); 39 | }; 40 | -------------------------------------------------------------------------------- /src/HelloWorld/Arc.tsx: -------------------------------------------------------------------------------- 1 | import {useVideoConfig} from 'remotion'; 2 | import {COLOR_1, COLOR_2} from './config'; 3 | 4 | export const Arc: React.FC<{ 5 | progress: number; 6 | rotation: number; 7 | rotateProgress: number; 8 | }> = ({progress, rotation, rotateProgress}) => { 9 | const config = useVideoConfig(); 10 | const cx = config.width / 2; 11 | const cy = config.height / 2; 12 | 13 | const rx = config.height / 8; 14 | const ry = rx * 2.2; 15 | const arcLength = Math.PI * 2 * Math.sqrt((rx * rx + ry * ry) / 2); 16 | const strokeWidth = arcLength / 60; 17 | 18 | return ( 19 | <svg 20 | viewBox={`0 0 ${config.width} ${config.height}`} 21 | style={{ 22 | position: 'absolute', 23 | transform: `rotate(${rotation * rotateProgress}deg)`, 24 | }} 25 | > 26 | <defs> 27 | <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> 28 | <stop offset="0%" stopColor={COLOR_1} /> 29 | <stop offset="100%" stopColor={COLOR_2} /> 30 | </linearGradient> 31 | </defs> 32 | <ellipse 33 | cx={cx} 34 | cy={cy} 35 | rx={rx} 36 | ry={ry} 37 | fill="none" 38 | stroke="url(#gradient)" 39 | strokeDasharray={arcLength} 40 | strokeDashoffset={arcLength - arcLength * progress} 41 | strokeLinecap="round" 42 | strokeWidth={strokeWidth} 43 | /> 44 | </svg> 45 | ); 46 | }; 47 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Icons/Evil.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | const Evil = () => { 3 | return ( 4 | <svg 5 | width="300" 6 | height="300" 7 | viewBox="0 0 48 48" 8 | fill="none" 9 | xmlns="http://www.w3.org/2000/svg" 10 | > 11 | <path 12 | d="M5.58613 16.6795L5.74731 16.3512L5.48313 16.0981C3.67321 14.3646 2.5 11.7032 2.5 8.70024C2.5 5.92697 3.50065 3.44479 5.07947 1.71589L11.895 8.64235L12.1868 8.93891L12.5315 8.70585C15.8044 6.49268 19.7505 5.20024 24 5.20024C28.0461 5.20024 31.817 6.3719 34.9937 8.39425L35.3279 8.60702L35.6115 8.33027L41.6855 2.40157C43.2656 4.05968 44.2647 6.43949 44.2647 9.09585C44.2647 11.5273 43.4275 13.7281 42.0728 15.3552L41.8557 15.6161L42.018 15.9142C43.6006 18.8218 44.5 22.1553 44.5 25.7002C44.5 37.0221 35.3218 46.2002 24 46.2002C12.6782 46.2002 3.5 37.0221 3.5 25.7002C3.5 22.4623 4.25033 19.401 5.58613 16.6795ZM13 33.2002C17.1421 33.2002 20.5 29.8424 20.5 25.7002C20.5 21.5581 17.1421 18.2002 13 18.2002C8.85786 18.2002 5.5 21.5581 5.5 25.7002C5.5 29.8424 8.85786 33.2002 13 33.2002ZM34 33.2002C38.1421 33.2002 41.5 29.8424 41.5 25.7002C41.5 21.5581 38.1421 18.2002 34 18.2002C29.8579 18.2002 26.5 21.5581 26.5 25.7002C26.5 29.8424 29.8579 33.2002 34 33.2002Z" 13 | fill="white" 14 | stroke="white" 15 | /> 16 | </svg> 17 | ); 18 | }; 19 | 20 | export default Evil; 21 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Icons/Sadomazofembotochist.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | 3 | const Sadomazofembotochist = () => { 4 | return ( 5 | <svg 6 | width="300" 7 | height="300" 8 | viewBox="0 0 48 48" 9 | fill="none" 10 | xmlns="http://www.w3.org/2000/svg" 11 | > 12 | <path 13 | d="M10 17.5H9.5V18V23C9.5 26.5898 12.4101 29.5 16 29.5H21H21.5V29V24C21.5 20.4102 18.5899 17.5 15 17.5H10ZM38.5 18V17.5H38H33C29.4101 17.5 26.5 20.4102 26.5 24V29V29.5H27H32C35.5899 29.5 38.5 26.5898 38.5 23V18ZM23.2134 39.2185L23.353 39.5134L23.6791 39.5044C23.7853 39.5015 23.8923 39.5 24 39.5C24.1077 39.5 24.2147 39.5015 24.3209 39.5044L24.647 39.5134L24.7866 39.2185C25.2678 38.2016 26.3025 37.5 27.5 37.5C29.1569 37.5 30.5 38.8431 30.5 40.5C30.5 41.7012 29.794 42.7386 28.7722 43.2178L28.7264 43.2393L28.6859 43.2694C27.723 43.9863 26.0103 44.5 24 44.5C21.9897 44.5 20.277 43.9863 19.3141 43.2694L19.2736 43.2393L19.2278 43.2178C18.206 42.7386 17.5 41.7012 17.5 40.5C17.5 38.8431 18.8431 37.5 20.5 37.5C21.6975 37.5 22.7322 38.2016 23.2134 39.2185ZM42.5 25.5C42.5 28.3239 42.0525 31.0218 41.2382 33.5H6.76179C5.94752 31.0218 5.5 28.3239 5.5 25.5C5.5 13.2672 13.8586 3.5 24 3.5C34.1414 3.5 42.5 13.2672 42.5 25.5Z" 14 | fill="white" 15 | stroke="white" 16 | /> 17 | </svg> 18 | ); 19 | }; 20 | 21 | export default Sadomazofembotochist; 22 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Rotation.tsx: -------------------------------------------------------------------------------- 1 | import { View } from "react-native"; 2 | import { interpolate, useCurrentFrame } from "remotion"; 3 | 4 | import { Extrapolate } from "../components/Redash"; 5 | 6 | import Heart from "./Icons/Heart"; 7 | import Robot from "./Icons/Robot"; 8 | import X from "./Icons/X"; 9 | 10 | const Rotation = () => { 11 | const frame = useCurrentFrame(); 12 | const rotate = interpolate(frame, [0, 10], [0, 45], Extrapolate.CLAMP); 13 | const translateY = interpolate(frame, [0, 10], [0, 350], Extrapolate.CLAMP); 14 | const scale = interpolate(frame, [10, 17], [1, 0.75], Extrapolate.CLAMP); 15 | return ( 16 | <View 17 | style={{ 18 | flex: 1, 19 | backgroundColor: "black", 20 | justifyContent: "center", 21 | alignItems: "center", 22 | }} 23 | > 24 | <View 25 | style={{ 26 | flexDirection: "row", 27 | height: 400, 28 | alignItems: "center", 29 | overflow: "hidden", 30 | }} 31 | > 32 | <View style={{ transform: [{ translateY }] }}> 33 | <Heart /> 34 | </View> 35 | <View style={{ transform: [{ scale }, { rotate: `${rotate}deg` }] }}> 36 | <X /> 37 | </View> 38 | <View style={{ transform: [{ translateY }] }}> 39 | <Robot /> 40 | </View> 41 | </View> 42 | </View> 43 | ); 44 | }; 45 | 46 | export default Rotation; 47 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Icons/Box.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | const Box = () => { 3 | return ( 4 | <svg 5 | width="300" 6 | height="300" 7 | viewBox="0 0 48 48" 8 | fill="none" 9 | xmlns="http://www.w3.org/2000/svg" 10 | > 11 | <g clip-path="url(#clip0)"> 12 | <path 13 | d="M29.1432 3.40184L29.1625 18.5674L18.632 18.4759L18.6128 3.38845L29.1432 3.40184ZM18.6333 19.4759L29.1638 19.5675L29.1757 28.9375L18.6453 28.9241L18.6333 19.4759ZM42.9057 28.6763C42.531 28.8559 42.1096 28.9445 41.4962 28.9532C41.495 28.9532 41.4939 28.9532 41.4927 28.9532L30.1757 28.9388L30.1638 19.5762L41.0084 19.6705L41.0177 19.6706L41.0271 19.6703C41.6798 19.6516 42.2114 19.7308 42.6943 19.9234C43.1777 20.1163 43.6426 20.4349 44.1444 20.9367C46.0165 22.8087 46.019 25.8383 44.1539 27.7034C43.6624 28.1949 43.2894 28.4923 42.9057 28.6763ZM18.6466 29.9241L29.177 29.9375L29.1957 44.68L18.6653 44.6666L18.6466 29.9241ZM17.6333 19.4672L17.6453 28.9228L5.33218 28.9072L4.8861 28.9066C4.44763 28.8896 4.11199 28.8187 3.80711 28.6873C3.40359 28.5134 3.00917 28.2144 2.48916 27.6944C0.617121 25.8224 0.614561 22.7928 2.47966 20.9277C3.4985 19.9089 4.57602 19.3248 5.7929 19.3641L5.7929 19.3643L5.80469 19.3644L17.6333 19.4672Z" 14 | fill="white" 15 | stroke="white" 16 | /> 17 | </g> 18 | <defs> 19 | <clipPath id="clip0"> 20 | <rect width="48" height="48" fill="white" /> 21 | </clipPath> 22 | </defs> 23 | </svg> 24 | ); 25 | }; 26 | 27 | export default Box; 28 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Dots2.tsx: -------------------------------------------------------------------------------- 1 | import { View, StyleSheet } from "react-native"; 2 | 3 | import Circle from "./Circle"; 4 | 5 | const styles = StyleSheet.create({ 6 | container: { 7 | ...StyleSheet.absoluteFillObject, 8 | backgroundImage: "radial-gradient(#F5E8E1 61%, #7A7F7A);", 9 | filter: "blur(40px)", 10 | }, 11 | footer: { 12 | ...StyleSheet.absoluteFillObject, 13 | flexDirection: "row", 14 | alignItems: "center", 15 | justifyContent: "center", 16 | paddingVertical: 100, 17 | paddingHorizontal: 250, 18 | }, 19 | }); 20 | 21 | const Background = () => { 22 | return ( 23 | <View style={{ flex: 1 }}> 24 | <View style={{ flex: 1, backgroundColor: "#7A7F7A" }} /> 25 | <View style={styles.container} /> 26 | </View> 27 | ); 28 | }; 29 | 30 | const Dots = () => { 31 | return ( 32 | <View style={{ flex: 1 }}> 33 | <Background /> 34 | <View style={[styles.footer]}> 35 | <View 36 | style={{ 37 | transform: [ 38 | { 39 | scale: 2, 40 | }, 41 | ], 42 | }} 43 | > 44 | <Circle darkMode={false} /> 45 | </View> 46 | <View 47 | style={{ 48 | margin: 200, 49 | transform: [ 50 | { 51 | scale: 2, 52 | }, 53 | ], 54 | }} 55 | > 56 | <Circle darkMode={false} /> 57 | </View> 58 | <View 59 | style={{ 60 | transform: [ 61 | { 62 | scale: 2, 63 | }, 64 | ], 65 | }} 66 | > 67 | <Circle darkMode={false} /> 68 | </View> 69 | </View> 70 | </View> 71 | ); 72 | }; 73 | 74 | export default Dots; 75 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Circle.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | interface CircleProps { 4 | darkMode: boolean; 5 | } 6 | 7 | const Circle = ({ darkMode }: CircleProps) => { 8 | return ( 9 | <svg 10 | width={132} 11 | height={134} 12 | viewBox="0 0 132 134" 13 | fill="none" 14 | xmlns="http://www.w3.org/2000/svg" 15 | > 16 | <g filter="url(#prefix__filter0_dd)"> 17 | <circle cx={66} cy={67} r={62} fill={darkMode ? "#D8D1CA" : "black"} /> 18 | </g> 19 | <defs> 20 | <filter 21 | id="prefix__filter0_dd" 22 | x={0} 23 | y={0} 24 | width={132} 25 | height={134} 26 | filterUnits="userSpaceOnUse" 27 | colorInterpolationFilters="sRGB" 28 | > 29 | <feFlood floodOpacity={0} result="BackgroundImageFix" /> 30 | <feColorMatrix 31 | in="SourceAlpha" 32 | values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" 33 | /> 34 | <feOffset dy={1} /> 35 | <feGaussianBlur stdDeviation={2} /> 36 | <feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" /> 37 | <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" /> 38 | <feColorMatrix 39 | in="SourceAlpha" 40 | values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" 41 | /> 42 | <feOffset dy={-1} /> 43 | <feGaussianBlur stdDeviation={2} /> 44 | <feColorMatrix values="0 0 0 0 0.184314 0 0 0 0 0.501961 0 0 0 0 0.929412 0 0 0 1 0" /> 45 | <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" /> 46 | <feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape" /> 47 | </filter> 48 | </defs> 49 | </svg> 50 | ); 51 | }; 52 | 53 | export default Circle; 54 | -------------------------------------------------------------------------------- /src/HelloWorld/Logo.tsx: -------------------------------------------------------------------------------- 1 | import {interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion'; 2 | import {Arc} from './Arc'; 3 | import {Atom} from './Atom'; 4 | 5 | export const Logo: React.FC<{ 6 | transitionStart: number; 7 | }> = ({transitionStart}) => { 8 | const videoConfig = useVideoConfig(); 9 | const frame = useCurrentFrame(); 10 | 11 | const development = spring({ 12 | config: { 13 | damping: 100, 14 | mass: 0.5, 15 | }, 16 | fps: videoConfig.fps, 17 | frame, 18 | }); 19 | 20 | const rotationDevelopment = spring({ 21 | config: { 22 | damping: 100, 23 | mass: 0.5, 24 | }, 25 | fps: videoConfig.fps, 26 | frame, 27 | }); 28 | 29 | const scaleIn = spring({ 30 | frame, 31 | config: { 32 | mass: 0.5, 33 | }, 34 | fps: videoConfig.fps, 35 | }); 36 | 37 | const translation = interpolate( 38 | spring({ 39 | frame: frame - transitionStart, 40 | fps: videoConfig.fps, 41 | config: { 42 | damping: 100, 43 | mass: 0.5, 44 | }, 45 | }), 46 | [0, 1], 47 | [0, -150] 48 | ); 49 | 50 | const scale = frame < 50 ? scaleIn : 1; 51 | 52 | const logoRotation = interpolate( 53 | frame, 54 | [0, videoConfig.durationInFrames], 55 | [0, 360] 56 | ); 57 | 58 | return ( 59 | <div 60 | style={{ 61 | position: 'absolute', 62 | width: videoConfig.width, 63 | height: videoConfig.height, 64 | transform: `scale(${scale}) translateY(${translation}px) rotate(${logoRotation}deg)`, 65 | }} 66 | > 67 | <Arc 68 | rotateProgress={rotationDevelopment} 69 | progress={development} 70 | rotation={30} 71 | /> 72 | <Arc 73 | rotateProgress={rotationDevelopment} 74 | rotation={90} 75 | progress={development} 76 | /> 77 | <Arc 78 | rotateProgress={rotationDevelopment} 79 | rotation={-30} 80 | progress={development} 81 | /> 82 | <Atom scale={rotationDevelopment} /> 83 | </div> 84 | ); 85 | }; 86 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Icons/Cat.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | const Cat = () => { 3 | return ( 4 | <svg 5 | width="300" 6 | height="300" 7 | viewBox="0 0 48 48" 8 | fill="none" 9 | xmlns="http://www.w3.org/2000/svg" 10 | > 11 | <path 12 | d="M9.18764 38.4456L9.17131 38.4193L9.15187 38.3953C4.83272 33.0497 4.75577 25.8086 6.79488 18.856C8.83204 11.9101 12.9503 5.3745 16.8252 1.5655C16.8467 1.54437 16.8674 1.52844 16.8854 1.51737C16.8956 1.51112 16.9039 1.50699 16.9102 1.5043C17.1624 1.65131 17.5171 1.98367 17.9481 2.48789C18.3788 2.99177 18.8489 3.62252 19.3209 4.30024C20.2646 5.65514 21.1941 7.16544 21.8047 8.15774L21.83 8.19888L21.9765 8.43684H22.2559H25.7559H26.0353L26.1817 8.19888L26.207 8.15773C26.8176 7.16544 27.7472 5.65514 28.6909 4.30024C29.1629 3.62252 29.6329 2.99177 30.0636 2.48789C30.4946 1.98367 30.8493 1.65131 31.1015 1.5043C31.1078 1.50699 31.1162 1.51112 31.1263 1.51737C31.1443 1.52844 31.165 1.54437 31.1865 1.5655C35.3281 5.63657 39.7437 12.8179 41.6039 20.2823C43.4641 27.7463 42.745 35.3596 36.8342 40.4869L36.8071 40.5105L36.7836 40.5376C33.6662 44.1427 28.9889 46.4368 23.7559 46.4368C17.5704 46.4368 12.1615 43.2316 9.18764 38.4456ZM20.2159 31.4158L20.4883 31.334L20.5573 31.0581C20.9065 29.6612 21.0042 27.5635 20.0574 25.8906C19.5765 25.0408 18.8313 24.3123 17.7435 23.8569C16.6629 23.4044 15.2734 23.2333 13.5138 23.4403L13.2185 23.475L13.108 23.7511C12.0561 26.3811 12.4157 28.7287 13.8352 30.2192C15.2489 31.7035 17.5879 32.2042 20.2159 31.4158ZM27.8205 31.1418L27.8895 31.4177L28.1619 31.4994C30.7899 32.2879 33.1289 31.7872 34.5426 30.3029C35.9621 28.8124 36.3217 26.4647 35.2698 23.8348L35.1593 23.5587L34.864 23.5239C33.1044 23.3169 31.7149 23.4881 30.6343 23.9406C29.5465 24.396 28.8013 25.1245 28.3204 25.9743C27.3736 27.6472 27.4713 29.7449 27.8205 31.1418Z" 13 | fill="white" 14 | stroke="white" 15 | /> 16 | </svg> 17 | ); 18 | }; 19 | 20 | export default Cat; 21 | -------------------------------------------------------------------------------- /src/LoveDeathReact/SignsDark.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | import { View } from "react-native"; 3 | import { interpolate, useCurrentFrame } from "remotion"; 4 | 5 | import { Extrapolate } from "../components/Redash"; 6 | 7 | import ReactLogo from "./ReactLogo"; 8 | 9 | const SignsDark = () => { 10 | const frame = useCurrentFrame(); 11 | const progress = interpolate(frame, [0, 18], [0, 1], Extrapolate.CLAMP); 12 | const stroke = interpolate(frame, [0, 6], [5, 40], Extrapolate.CLAMP); 13 | return ( 14 | <View 15 | style={{ 16 | flex: 1, 17 | backgroundColor: "black", 18 | justifyContent: "center", 19 | alignItems: "center", 20 | flexDirection: "row", 21 | }} 22 | > 23 | <svg 24 | width="490" 25 | height="490" 26 | viewBox="0 0 490 490" 27 | fill="none" 28 | xmlns="http://www.w3.org/2000/svg" 29 | > 30 | <path 31 | d="M163.182 165L95 245.114L163.182 328.636M326.818 328.636L395 248.523L326.818 165" 32 | stroke="white" 33 | stroke-width={stroke} 34 | stroke-miterlimit="10" 35 | stroke-linecap="round" 36 | stroke-linejoin="round" 37 | /> 38 | </svg> 39 | <ReactLogo progress={progress} stroke={stroke / 2} /> 40 | <svg 41 | width="490" 42 | height="490" 43 | viewBox="0 0 490 490" 44 | fill="none" 45 | xmlns="http://www.w3.org/2000/svg" 46 | > 47 | <path 48 | d="M272.273 136L217.727 354.182M95 243.386L163.182 163.273L95 243.386ZM95 243.386L163.182 326.909L95 243.386ZM395 246.795L326.818 326.909L395 246.795ZM395 246.795L326.818 163.273L395 246.795Z" 49 | stroke="white" 50 | stroke-width={stroke} 51 | stroke-miterlimit="10" 52 | stroke-linecap="round" 53 | stroke-linejoin="round" 54 | /> 55 | </svg> 56 | </View> 57 | ); 58 | }; 59 | 60 | export default SignsDark; 61 | -------------------------------------------------------------------------------- /src/LoveDeathReact/LoveDeathReact.tsx: -------------------------------------------------------------------------------- 1 | import { View, StyleSheet } from "react-native"; 2 | import { Easing, interpolate, useCurrentFrame } from "remotion"; 3 | 4 | import Background from "./Background"; 5 | import Circle from "./Circle"; 6 | import Rect from "./Rect"; 7 | import Title from "./Title"; 8 | 9 | const styles = StyleSheet.create({ 10 | footer: { 11 | ...StyleSheet.absoluteFillObject, 12 | flexDirection: "row", 13 | alignItems: "flex-end", 14 | justifyContent: "space-between", 15 | paddingVertical: 100, 16 | paddingHorizontal: 250, 17 | }, 18 | }); 19 | 20 | interface LoveDeathReactProps { 21 | still: boolean; 22 | darkMode: boolean; 23 | noTitle?: boolean; 24 | } 25 | 26 | const LoveDeathReact = ({ darkMode, still, noTitle }: LoveDeathReactProps) => { 27 | const currentFrame = useCurrentFrame(); 28 | const opacity = darkMode 29 | ? interpolate(currentFrame, [0, 2 * 24], [1, 0], { 30 | easing: Easing.out(Easing.ease), 31 | extrapolateLeft: "clamp", 32 | extrapolateRight: "clamp", 33 | }) 34 | : 0; 35 | return ( 36 | <View style={{ flex: 1 }}> 37 | <Background /> 38 | {darkMode ? ( 39 | <View 40 | style={{ ...StyleSheet.absoluteFillObject, backgroundColor: "black" }} 41 | /> 42 | ) : null} 43 | <View style={styles.footer}> 44 | <Rect darkMode={darkMode} /> 45 | <Circle darkMode={darkMode} /> 46 | <Rect darkMode={darkMode} /> 47 | </View> 48 | <View 49 | style={{ 50 | ...StyleSheet.absoluteFillObject, 51 | justifyContent: "center", 52 | alignItems: "center", 53 | }} 54 | > 55 | {!noTitle && <Title darkMode={darkMode} still={still} />} 56 | </View> 57 | <View 58 | style={{ 59 | ...StyleSheet.absoluteFillObject, 60 | backgroundColor: "black", 61 | opacity, 62 | }} 63 | /> 64 | </View> 65 | ); 66 | }; 67 | 68 | export default LoveDeathReact; 69 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Rect.tsx: -------------------------------------------------------------------------------- 1 | import { Easing, interpolate } from "remotion"; 2 | 3 | import { Extrapolate } from "../components/Redash"; 4 | 5 | interface RectProps { 6 | darkMode: boolean; 7 | progress?: number; 8 | } 9 | 10 | const Circle = ({ progress, darkMode }: RectProps) => { 11 | return ( 12 | <svg 13 | width={238 * 2} 14 | height={140} 15 | viewBox={[0, 0, 238 * 2, 140].join(" ")} 16 | fill="red" 17 | xmlns="http://www.w3.org/2000/svg" 18 | > 19 | <g filter="url(#prefix__filter0_dd)"> 20 | <rect 21 | x={4} 22 | y={5} 23 | width={interpolate(progress || 0, [0, 0.5, 1], [230, 230 * 2, 230], { 24 | ...Extrapolate.CLAMP, 25 | })} 26 | height={130} 27 | rx={50} 28 | fill={darkMode ? "#929895" : "black"} 29 | /> 30 | </g> 31 | <defs> 32 | <filter 33 | id="prefix__filter0_dd" 34 | x={0} 35 | y={0} 36 | width={238 * 2} 37 | height={140} 38 | filterUnits="userSpaceOnUse" 39 | colorInterpolationFilters="sRGB" 40 | > 41 | <feFlood floodOpacity={0} result="BackgroundImageFix" /> 42 | <feColorMatrix 43 | in="SourceAlpha" 44 | values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" 45 | /> 46 | <feOffset dy={1} /> 47 | <feGaussianBlur stdDeviation={2} /> 48 | <feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" /> 49 | <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" /> 50 | <feColorMatrix 51 | in="SourceAlpha" 52 | values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" 53 | /> 54 | <feOffset dy={-1} /> 55 | <feGaussianBlur stdDeviation={2} /> 56 | <feColorMatrix values="0 0 0 0 0.184314 0 0 0 0 0.501961 0 0 0 0 0.929412 0 0 0 1 0" /> 57 | <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" /> 58 | <feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape" /> 59 | </filter> 60 | </defs> 61 | </svg> 62 | ); 63 | }; 64 | 65 | export default Circle; 66 | -------------------------------------------------------------------------------- /src/LoveDeathReact/index.tsx: -------------------------------------------------------------------------------- 1 | import { View } from "react-native"; 2 | import { Sequence, useVideoConfig } from "remotion"; 3 | 4 | import LoveDeathReact from "./LoveDeathReact"; 5 | import Dots from "./Dots"; 6 | import Dots2 from "./Dots2"; 7 | import SignsLight from "./SignsLight"; 8 | import SignsDark from "./SignsDark"; 9 | import LogoLight from "./LogoLight"; 10 | import Icons from "./Icons"; 11 | import Roulette from "./Roulette"; 12 | import Rotation from "./Rotation"; 13 | import MainTitle from "./MainTitle"; 14 | 15 | const Comp = () => { 16 | const { fps } = useVideoConfig(); 17 | const cuts = [2 * fps, fps, fps + 4, 1, 19, 18, 19, 13, 40, 17, 102] as const; 18 | const from = (index: number) => cuts.slice(0, index).reduce((a, v) => a + v); 19 | return ( 20 | <View style={{ flex: 1 }}> 21 | <Sequence from={0} durationInFrames={cuts[0]} name="Title Dark"> 22 | <LoveDeathReact darkMode={true} still={true} /> 23 | </Sequence> 24 | <Sequence from={from(1)} durationInFrames={cuts[1]} name="Title Light"> 25 | <LoveDeathReact darkMode={false} still={false} /> 26 | </Sequence> 27 | <Sequence from={from(2)} durationInFrames={cuts[2]} name="Dots"> 28 | <Dots /> 29 | </Sequence> 30 | <Sequence from={from(3)} durationInFrames={cuts[3]} name="Big Dots"> 31 | <Dots2 /> 32 | </Sequence> 33 | <Sequence from={from(4)} durationInFrames={cuts[4]} name="Signs Light"> 34 | <SignsLight /> 35 | </Sequence> 36 | <Sequence from={from(5)} durationInFrames={cuts[5]} name="Signs Dark"> 37 | <SignsDark /> 38 | </Sequence> 39 | <Sequence from={from(6)} durationInFrames={cuts[6]} name="Logo Light"> 40 | <LogoLight /> 41 | </Sequence> 42 | <Sequence from={from(7)} durationInFrames={cuts[7]} name="Logo Light"> 43 | <Icons /> 44 | </Sequence> 45 | <Sequence from={from(8)} durationInFrames={cuts[8]} name="Logo Light"> 46 | <Roulette /> 47 | </Sequence> 48 | <Sequence from={from(9)} durationInFrames={cuts[9]} name="Rotation"> 49 | <Rotation /> 50 | </Sequence> 51 | <Sequence from={from(10)} durationInFrames={cuts[10]} name="Rotation"> 52 | <MainTitle /> 53 | </Sequence> 54 | </View> 55 | ); 56 | }; 57 | 58 | export default Comp; 59 | -------------------------------------------------------------------------------- /src/components/Redash.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Easing, 3 | interpolate, 4 | spring, 5 | useCurrentFrame, 6 | useVideoConfig, 7 | } from "remotion"; 8 | 9 | export const UHD = { width: 3840, height: 2160, aspectRatio: 16 / 9 }; 10 | export const HD = { width: 1280, height: 720, aspectRatio: 16 / 9 }; 11 | 12 | export const interpolateFontWeight = ( 13 | progress: number, 14 | inputRange: number[], 15 | outputRange: string[] 16 | ) => 17 | `${Math.round( 18 | interpolate( 19 | progress, 20 | inputRange, 21 | outputRange.map((w) => parseInt(w[0]!, 10)) 22 | ) 23 | )}00`; 24 | 25 | export interface UseSpringParams { 26 | startInMs: number; 27 | currentFrame?: number; 28 | } 29 | 30 | export const useSpring = ({ startInMs, currentFrame }: UseSpringParams) => { 31 | const { fps } = useVideoConfig(); 32 | const realFrame = useCurrentFrame(); 33 | const frame = currentFrame ?? realFrame; 34 | const startInFrames = (fps * startInMs) / 1000; 35 | return spring({ 36 | frame: frame - startInFrames, 37 | from: 0, 38 | to: 1, 39 | fps, 40 | config: { 41 | stiffness: 100, 42 | damping: 200, 43 | }, 44 | }); 45 | }; 46 | 47 | export interface UseTimingParams { 48 | startInMs: number; 49 | durationInMs: number; 50 | currentFrame?: number; 51 | } 52 | 53 | export const useTiming = ({ 54 | durationInMs, 55 | startInMs, 56 | currentFrame, 57 | }: UseTimingParams) => { 58 | const { fps } = useVideoConfig(); 59 | const realFrame = useCurrentFrame(); 60 | const frame = currentFrame ?? realFrame; 61 | const startInFrames = (fps * startInMs) / 1000; 62 | const durationInFrames = (fps * durationInMs) / 1000; 63 | return interpolate( 64 | frame, 65 | [startInFrames, startInFrames + durationInFrames], 66 | [0, 1], 67 | { ...Extrapolate.CLAMP, easing: Easing.inOut(Easing.ease) } 68 | ); 69 | }; 70 | 71 | export interface UseLoopParams { 72 | durationInMs: number; 73 | } 74 | 75 | export const useLoop = ({ durationInMs }: UseLoopParams) => { 76 | const { fps } = useVideoConfig(); 77 | const frame = useCurrentFrame(); 78 | const durationInFrames = (fps * durationInMs) / 1000; 79 | const iteration = Math.floor(frame / durationInFrames); 80 | const progress = frame % durationInFrames; 81 | return interpolate( 82 | progress, 83 | [0, durationInFrames], 84 | iteration % 2 ? [0, 1] : [1, 0], 85 | { easing: Easing.inOut(Easing.ease) } 86 | ); 87 | }; 88 | 89 | export const Extrapolate = { 90 | CLAMP: { 91 | extrapolateLeft: "clamp", 92 | extrapolateRight: "clamp", 93 | }, 94 | } as const; 95 | -------------------------------------------------------------------------------- /server.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * This is an example of a server that returns dynamic video. 3 | * Run `npm run server` to try it out! 4 | * If you don't want to render videos on a server, you can safely 5 | * delete this file. 6 | */ 7 | 8 | import {bundle} from '@remotion/bundler'; 9 | import { 10 | getCompositions, 11 | renderFrames, 12 | stitchFramesToVideo, 13 | } from '@remotion/renderer'; 14 | import express from 'express'; 15 | import fs from 'fs'; 16 | import os from 'os'; 17 | import path from 'path'; 18 | 19 | const app = express(); 20 | const port = process.env.PORT || 8000; 21 | const compositionId = 'HelloWorld'; 22 | 23 | const cache = new Map<string, string>(); 24 | 25 | app.get('/', async (req, res) => { 26 | const sendFile = (file: string) => { 27 | fs.createReadStream(file) 28 | .pipe(res) 29 | .on('close', () => { 30 | res.end(); 31 | }); 32 | }; 33 | try { 34 | if (cache.get(JSON.stringify(req.query))) { 35 | sendFile(cache.get(JSON.stringify(req.query)) as string); 36 | return; 37 | } 38 | const bundled = await bundle(path.join(__dirname, './src/index.tsx')); 39 | const comps = await getCompositions(bundled, {inputProps: req.query}); 40 | const video = comps.find((c) => c.id === compositionId); 41 | if (!video) { 42 | throw new Error(`No video called ${compositionId}`); 43 | } 44 | res.set('content-type', 'video/mp4'); 45 | 46 | const tmpDir = await fs.promises.mkdtemp( 47 | path.join(os.tmpdir(), 'remotion-') 48 | ); 49 | const {assetsInfo} = await renderFrames({ 50 | config: video, 51 | webpackBundle: bundled, 52 | onStart: () => console.log('Rendering frames...'), 53 | onFrameUpdate: (f) => { 54 | if (f % 10 === 0) { 55 | console.log(`Rendered frame ${f}`); 56 | } 57 | }, 58 | parallelism: null, 59 | outputDir: tmpDir, 60 | inputProps: req.query, 61 | compositionId, 62 | imageFormat: 'jpeg', 63 | }); 64 | 65 | const finalOutput = path.join(tmpDir, 'out.mp4'); 66 | await stitchFramesToVideo({ 67 | dir: tmpDir, 68 | force: true, 69 | fps: video.fps, 70 | height: video.height, 71 | width: video.width, 72 | outputLocation: finalOutput, 73 | imageFormat: 'jpeg', 74 | assetsInfo, 75 | }); 76 | cache.set(JSON.stringify(req.query), finalOutput); 77 | sendFile(finalOutput); 78 | console.log('Video rendered and sent!'); 79 | } catch (err) { 80 | console.error(err); 81 | res.json({ 82 | error: err, 83 | }); 84 | } 85 | }); 86 | 87 | app.listen(port); 88 | 89 | console.log( 90 | [ 91 | `The server has started on http://localhost:${port}!`, 92 | 'You can render a video by passing props as URL parameters.', 93 | '', 94 | 'If you are running Hello World, try this:', 95 | '', 96 | `http://localhost:${port}?titleText=Hello,+World!&titleColor=red`, 97 | '', 98 | ].join('\n') 99 | ); 100 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Dots.tsx: -------------------------------------------------------------------------------- 1 | import { View, StyleSheet } from "react-native"; 2 | import { Easing, interpolate, useCurrentFrame } from "remotion"; 3 | 4 | import { Extrapolate } from "../components/Redash"; 5 | 6 | import Rect from "./Rect"; 7 | import Circle from "./Circle"; 8 | 9 | const styles = StyleSheet.create({ 10 | container: { 11 | ...StyleSheet.absoluteFillObject, 12 | backgroundImage: "radial-gradient(#F5E8E1 61%, #7A7F7A);", 13 | filter: "blur(40px)", 14 | }, 15 | footer: { 16 | ...StyleSheet.absoluteFillObject, 17 | flexDirection: "row", 18 | alignItems: "flex-end", 19 | justifyContent: "space-between", 20 | paddingVertical: 100, 21 | paddingHorizontal: 250, 22 | }, 23 | }); 24 | 25 | const Background = () => { 26 | return ( 27 | <View style={{ flex: 1 }}> 28 | <View style={{ flex: 1, backgroundColor: "#7A7F7A" }} /> 29 | <View style={styles.container} /> 30 | </View> 31 | ); 32 | }; 33 | 34 | const Dots = () => { 35 | const frame = useCurrentFrame(); 36 | const progress = interpolate(frame, [0, 22], [0, 1], { 37 | ...Extrapolate.CLAMP, 38 | easing: Easing.inOut(Easing.ease), 39 | }); 40 | 41 | const progress2 = interpolate(frame, [22, 25], [0, 1], { 42 | ...Extrapolate.CLAMP, 43 | easing: Easing.inOut(Easing.ease), 44 | }); 45 | const progress3 = interpolate(frame, [25, 28], [0, 1], { 46 | ...Extrapolate.CLAMP, 47 | easing: Easing.inOut(Easing.ease), 48 | }); 49 | const translateX = interpolate(progress, [0, 1], [0, 600], Extrapolate.CLAMP); 50 | const translateX2 = interpolate( 51 | progress3, 52 | [0, 1], 53 | [0, 100], 54 | Extrapolate.CLAMP 55 | ); 56 | return ( 57 | <View style={{ flex: 1 }}> 58 | <Background /> 59 | <View 60 | style={[ 61 | styles.footer, 62 | { 63 | transform: [ 64 | { 65 | translateY: interpolate( 66 | progress2, 67 | [0, 1], 68 | [0, -900], 69 | Extrapolate.CLAMP 70 | ), 71 | }, 72 | ], 73 | }, 74 | ]} 75 | > 76 | <View 77 | style={{ 78 | transform: [ 79 | { translateX: translateX + translateX2 }, 80 | { rotate: "180deg" }, 81 | ], 82 | }} 83 | > 84 | <Rect darkMode={false} progress={progress} /> 85 | </View> 86 | <View 87 | style={{ 88 | transform: [ 89 | { 90 | scale: interpolate( 91 | progress3, 92 | [0, 1], 93 | [1, 1.5], 94 | Extrapolate.CLAMP 95 | ), 96 | }, 97 | ], 98 | }} 99 | > 100 | <Circle darkMode={false} /> 101 | </View> 102 | <View 103 | style={{ 104 | transform: [{ translateX: -translateX - translateX2 }], 105 | }} 106 | > 107 | <Rect darkMode={false} progress={progress} /> 108 | </View> 109 | </View> 110 | </View> 111 | ); 112 | }; 113 | 114 | export default Dots; 115 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Icons/Heart.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | 3 | const Heart = () => { 4 | return ( 5 | <svg 6 | width="300" 7 | height="300" 8 | viewBox="0 0 48 48" 9 | fill="none" 10 | xmlns="http://www.w3.org/2000/svg" 11 | > 12 | <g> 13 | <path 14 | d="M23.2435 44.1249C23.6423 44.5864 24.3577 44.5864 24.7565 44.1249L42.832 23.2133C40.7301 24.9501 37.993 26.0002 35 26.0002C30.0806 26.0002 25.8525 23.1633 24 19.1035C22.1475 23.1633 17.9194 26.0002 13 26.0002C10.007 26.0002 7.26991 24.9501 5.16803 23.2134L23.2435 44.1249Z" 15 | fill={"white"} 16 | /> 17 | <path 18 | fill-rule="evenodd" 19 | clip-rule="evenodd" 20 | d="M13 26C17.9194 26 22.1475 23.1631 24 19.1033C23.3568 17.6937 23 16.1368 23 14.5C23 12.8632 23.3568 11.3063 24 9.89672C22.1475 5.83689 17.9194 3 13 3C6.37258 3 1 8.14873 1 14.5C1 17.983 2.61569 21.1043 5.168 23.2132C7.26988 24.9499 10.007 26 13 26Z" 21 | fill={"white"} 22 | /> 23 | <path 24 | d="M25 14.4998C25 12.863 24.6432 11.3061 24 9.89648C23.3568 11.3061 23 12.863 23 14.4998C23 16.1366 23.3568 17.6935 24 19.1031C24.6432 17.6936 25 16.1366 25 14.4998Z" 25 | fill={"white"} 26 | /> 27 | <path 28 | d="M47 14.5C47 8.14873 41.6274 3 35 3C30.0806 3 25.8525 5.83689 24 9.89672C24.6432 11.3063 25 12.8632 25 14.5C25 16.1368 24.6432 17.6938 24 19.1033C25.8525 23.1631 30.0806 26 35 26C37.993 26 40.7301 24.9499 42.832 23.2131C45.3843 21.1043 47 17.9829 47 14.5Z" 29 | fill={"white"} 30 | /> 31 | <path 32 | d="M42.832 23.2131L43.1505 23.5986L43.1829 23.5719L43.2103 23.5401L42.832 23.2131ZM24 9.89672L24.4549 9.68916L24 8.69228L23.5451 9.68916L24 9.89672ZM5.168 23.2132L4.78972 23.5401L4.81716 23.5719L4.84951 23.5986L5.168 23.2132ZM23.5451 10.1043C24.1593 11.4504 24.5 12.9367 24.5 14.5H25.5C25.5 12.7897 25.127 11.1621 24.4549 9.68916L23.5451 10.1043ZM24.5 14.5C24.5 16.0633 24.1593 17.5496 23.5451 18.8957L24.4549 19.3108C25.127 17.8379 25.5 16.2103 25.5 14.5H24.5ZM23.5451 19.3108C25.4798 23.5507 29.8868 26.5 35 26.5V25.5C30.2743 25.5 26.2253 22.7755 24.4549 18.8957L23.5451 19.3108ZM35 26.5C38.1114 26.5 40.9606 25.408 43.1505 23.5986L42.5136 22.8277C40.4997 24.4917 37.8747 25.5 35 25.5V26.5ZM23.5451 18.8957C21.7747 22.7755 17.7257 25.5 13 25.5V26.5C18.1132 26.5 22.5202 23.5507 24.4549 19.3108L23.5451 18.8957ZM24.4549 18.8957C23.8407 17.5496 23.5 16.0633 23.5 14.5H22.5C22.5 16.2103 22.873 17.8379 23.5451 19.3108L24.4549 18.8957ZM23.5 14.5C23.5 12.9367 23.8407 11.4504 24.4549 10.1043L23.5451 9.68916C22.873 11.1621 22.5 12.7897 22.5 14.5H23.5ZM43.2103 23.5401L45.6385 20.7309L44.882 20.077L42.4538 22.8862L43.2103 23.5401ZM13 25.5C10.1253 25.5 7.50037 24.4917 5.48648 22.8277L4.84951 23.5986C7.03939 25.4081 9.88864 26.5 13 26.5V25.5ZM2.36149 20.7309L4.78972 23.5401L5.54627 22.8862L3.11804 20.077L2.36149 20.7309ZM23.2435 44.1247L24 43.4708L23.2435 44.1247ZM24.7565 44.1247L24 43.4708L24.7565 44.1247ZM42.832 23.2131L42.1951 22.4423L42.1304 22.4957L42.0755 22.5592L42.832 23.2131ZM24 9.89672L23.0902 10.3119L24 12.3056L24.9098 10.3119L24 9.89672ZM5.168 23.2132L5.92454 22.5592L5.86966 22.4957L5.80496 22.4423L5.168 23.2132ZM22.4869 44.7787C23.2846 45.7015 24.7154 45.7015 25.5131 44.7787L24 43.4708L22.4869 44.7787ZM35 4C41.1157 4 46 8.74069 46 14.5H48C48 7.55676 42.1392 2 35 2V4ZM2 14.5C2 8.74069 6.88433 4 13 4V2C5.86084 2 0 7.55676 0 14.5H2ZM43.469 23.984C46.2345 21.699 48 18.3022 48 14.5H46C46 17.6637 44.5341 20.5096 42.1951 22.4423L43.469 23.984ZM35 2C29.6931 2 25.107 5.06172 23.0902 9.4816L24.9098 10.3119C26.598 6.61207 30.468 4 35 4V2ZM13 4C17.532 4 21.402 6.61207 23.0902 10.3119L24.9098 9.4816C22.893 5.06172 18.3069 2 13 2V4ZM25.5131 44.7787L43.5886 23.8671L42.0755 22.5592L24 43.4708L25.5131 44.7787ZM4.41145 23.8671L22.4869 44.7787L24 43.4708L5.92454 22.5592L4.41145 23.8671ZM5.80496 22.4423C3.46589 20.5096 2 17.6637 2 14.5H0C0 18.3022 1.76549 21.699 4.53103 23.9841L5.80496 22.4423Z" 33 | fill={"white"} 34 | /> 35 | <circle cx="15" cy="20" r="5" fill={"black"} /> 36 | <circle cx="33" cy="20" r="5" fill={"black"} /> 37 | </g> 38 | </svg> 39 | ); 40 | }; 41 | 42 | export default Heart; 43 | -------------------------------------------------------------------------------- /src/LoveDeathReact/ReactLogo.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | import { useRef, useState } from "react"; 3 | import { Dimensions, StyleSheet, View } from "react-native"; 4 | import Svg, { Ellipse, Circle } from "react-native-svg"; 5 | import { continueRender, delayRender, interpolate } from "remotion"; 6 | import { svgPathProperties } from "svg-path-properties"; 7 | 8 | import { Extrapolate } from "../components/Redash"; 9 | 10 | interface AnimatedLogoProps { 11 | progress: number; 12 | stroke: number; 13 | } 14 | 15 | const AnimatedLogo = ({ progress, stroke }: AnimatedLogoProps) => { 16 | const properties = new svgPathProperties( 17 | "M178.007 283.429C204.041 328.521 234.394 365.93 262.736 389.882C276.873 401.829 290.94 410.795 304.097 415.48C317.203 420.146 330.756 420.983 342.251 414.347C353.745 407.71 359.797 395.555 362.309 381.871C364.831 368.135 364.099 351.469 360.821 333.252C354.249 296.731 337.028 251.741 310.994 206.649C284.96 161.557 254.608 124.147 226.266 100.195C212.129 88.2486 198.061 79.282 184.905 74.5979C171.798 69.9314 158.245 69.0944 146.751 75.7307C135.256 82.367 129.205 94.5228 126.693 108.207C124.171 121.942 124.903 138.609 128.181 156.825C134.752 193.346 151.974 238.337 178.007 283.429Z" 18 | ); 19 | const length = properties.getTotalLength(); 20 | const strokeDashoffset = interpolate( 21 | progress, 22 | [0, 0.5], 23 | [length, 0], 24 | Extrapolate.CLAMP 25 | ); 26 | const rotate = interpolate(progress, [0.5, 1], [0, 60], Extrapolate.CLAMP); 27 | return ( 28 | <svg 29 | width="490" 30 | height="490" 31 | viewBox="0 0 490 490" 32 | fill="none" 33 | xmlns="http://www.w3.org/2000/svg" 34 | > 35 | <path 36 | d="M244.5 282.721C265.211 282.721 282 265.708 282 244.721C282 223.734 265.211 206.721 244.5 206.721C223.789 206.721 207 223.734 207 244.721C207 265.708 223.789 282.721 244.5 282.721Z" 37 | fill="white" 38 | /> 39 | <path 40 | d="M244.5 321.818C296.568 321.818 344.141 314.236 379.056 301.667C396.47 295.398 411.269 287.698 421.904 278.647C432.499 269.629 440 258.31 440 245.038C440 231.765 432.499 220.446 421.904 211.429C411.269 202.377 396.47 194.678 379.056 188.408C344.141 175.839 296.568 168.258 244.5 168.258C192.432 168.258 144.859 175.839 109.944 188.408C92.5299 194.678 77.7307 202.377 67.096 211.429C56.5014 220.446 49 231.765 49 245.038C49 258.31 56.5014 269.629 67.096 278.647C77.7307 287.698 92.5299 295.398 109.944 301.667C144.859 314.236 192.432 321.818 244.5 321.818Z" 41 | stroke="white" 42 | stroke-width={stroke} 43 | strokeDashoffset={strokeDashoffset} 44 | strokeDasharray={`${length} ${length}`} 45 | /> 46 | <path 47 | d="M244.5 321.818C296.568 321.818 344.141 314.236 379.056 301.667C396.47 295.398 411.269 287.698 421.904 278.647C432.499 269.629 440 258.31 440 245.038C440 231.765 432.499 220.446 421.904 211.429C411.269 202.377 396.47 194.678 379.056 188.408C344.141 175.839 296.568 168.258 244.5 168.258C192.432 168.258 144.859 175.839 109.944 188.408C92.5299 194.678 77.7307 202.377 67.096 211.429C56.5014 220.446 49 231.765 49 245.038C49 258.31 56.5014 269.629 67.096 278.647C77.7307 287.698 92.5299 295.398 109.944 301.667C144.859 314.236 192.432 321.818 244.5 321.818Z" 48 | stroke="white" 49 | stroke-width={stroke} 50 | strokeDashoffset={strokeDashoffset} 51 | strokeDasharray={`${length} ${length}`} 52 | transform={`rotate(${rotate}, ${490 / 2} ${490 / 2})`} 53 | /> 54 | <path 55 | d="M244.5 321.818C296.568 321.818 344.141 314.236 379.056 301.667C396.47 295.398 411.269 287.698 421.904 278.647C432.499 269.629 440 258.31 440 245.038C440 231.765 432.499 220.446 421.904 211.429C411.269 202.377 396.47 194.678 379.056 188.408C344.141 175.839 296.568 168.258 244.5 168.258C192.432 168.258 144.859 175.839 109.944 188.408C92.5299 194.678 77.7307 202.377 67.096 211.429C56.5014 220.446 49 231.765 49 245.038C49 258.31 56.5014 269.629 67.096 278.647C77.7307 287.698 92.5299 295.398 109.944 301.667C144.859 314.236 192.432 321.818 244.5 321.818Z" 56 | stroke="white" 57 | stroke-width={stroke} 58 | strokeDashoffset={strokeDashoffset} 59 | strokeDasharray={`${length} ${length}`} 60 | transform={`rotate(-${rotate}, ${490 / 2} ${490 / 2})`} 61 | /> 62 | </svg> 63 | ); 64 | }; 65 | export default AnimatedLogo; 66 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Roulette.tsx: -------------------------------------------------------------------------------- 1 | import { View } from "react-native"; 2 | import { Easing, interpolate, useCurrentFrame } from "remotion"; 3 | 4 | import { Extrapolate } from "../components/Redash"; 5 | 6 | import Heart from "./Icons/Heart"; 7 | import Skull from "./Icons/Skull"; 8 | import Robot from "./Icons/Robot"; 9 | import Sadomazofembotochist from "./Icons/Sadomazofembotochist"; 10 | import Mute from "./Icons/Mute"; 11 | import Eye from "./Icons/Eye"; 12 | import Cat from "./Icons/Cat"; 13 | import Pyramid from "./Icons/Pyramid"; 14 | import Evil from "./Icons/Evil"; 15 | import Cyclop from "./Icons/Cyclop"; 16 | import Box from "./Icons/Box"; 17 | import X from "./Icons/X"; 18 | 19 | const Roulette = () => { 20 | const frame = useCurrentFrame(); 21 | const marginVertical = 50; 22 | const translateY = interpolate(frame, [0, 35], [0, 12 * 300], { 23 | ...Extrapolate.CLAMP, 24 | easing: Easing.in(Easing.ease), 25 | }); 26 | const translateY1 = interpolate(frame, [0, 40], [0, 8 * 300], { 27 | ...Extrapolate.CLAMP, 28 | easing: Easing.in(Easing.ease), 29 | }); 30 | return ( 31 | <View 32 | style={{ 33 | flex: 1, 34 | backgroundColor: "black", 35 | justifyContent: "center", 36 | alignItems: "center", 37 | }} 38 | > 39 | <View 40 | style={{ 41 | width: 300 * 3, 42 | height: 300 + marginVertical * 2, 43 | flexDirection: "row", 44 | flexWrap: "wrap-reverse", 45 | overflow: "hidden", 46 | }} 47 | > 48 | <View style={{ marginVertical }}> 49 | <Heart /> 50 | </View> 51 | <View 52 | style={{ marginVertical, transform: [{ translateY: translateY1 }] }} 53 | > 54 | <Skull /> 55 | </View> 56 | <View style={{ marginVertical, transform: [{ translateY }] }}> 57 | <Robot /> 58 | </View> 59 | <View style={{ marginVertical }}> 60 | <Heart /> 61 | </View> 62 | <View 63 | style={{ marginVertical, transform: [{ translateY: translateY1 }] }} 64 | > 65 | <Sadomazofembotochist /> 66 | </View> 67 | <View style={{ marginVertical, transform: [{ translateY }] }}> 68 | <Sadomazofembotochist /> 69 | </View> 70 | <View style={{ marginVertical }}> 71 | <Heart /> 72 | </View> 73 | <View 74 | style={{ marginVertical, transform: [{ translateY: translateY1 }] }} 75 | > 76 | <Cyclop /> 77 | </View> 78 | <View style={{ marginVertical, transform: [{ translateY }] }}> 79 | <Mute /> 80 | </View> 81 | <View style={{ marginVertical }}> 82 | <Heart /> 83 | </View> 84 | <View 85 | style={{ marginVertical, transform: [{ translateY: translateY1 }] }} 86 | > 87 | <Pyramid /> 88 | </View> 89 | <View style={{ marginVertical, transform: [{ translateY }] }}> 90 | <Pyramid /> 91 | </View> 92 | <View style={{ marginVertical }}> 93 | <Heart /> 94 | </View> 95 | <View 96 | style={{ marginVertical, transform: [{ translateY: translateY1 }] }} 97 | > 98 | <Box /> 99 | </View> 100 | <View style={{ marginVertical, transform: [{ translateY }] }}> 101 | <Robot /> 102 | </View> 103 | <View style={{ marginVertical }}> 104 | <Heart /> 105 | </View> 106 | <View 107 | style={{ marginVertical, transform: [{ translateY: translateY1 }] }} 108 | > 109 | <Skull /> 110 | </View> 111 | <View style={{ marginVertical, transform: [{ translateY }] }}> 112 | <Cat /> 113 | </View> 114 | <View style={{ marginVertical }}> 115 | <Heart /> 116 | </View> 117 | <View 118 | style={{ marginVertical, transform: [{ translateY: translateY1 }] }} 119 | > 120 | <X /> 121 | </View> 122 | <View style={{ marginVertical, transform: [{ translateY }] }}> 123 | <Evil /> 124 | </View> 125 | <View style={{ marginVertical }}> 126 | <Heart /> 127 | </View> 128 | <View 129 | style={{ marginVertical, transform: [{ translateY: translateY1 }] }} 130 | > 131 | <X /> 132 | </View> 133 | <View style={{ marginVertical, transform: [{ translateY }] }}> 134 | <Eye /> 135 | </View> 136 | <View style={{ marginVertical }}> 137 | <Heart /> 138 | </View> 139 | <View 140 | style={{ marginVertical, transform: [{ translateY: translateY1 }] }} 141 | > 142 | <X /> 143 | </View> 144 | <View style={{ marginVertical, transform: [{ translateY }] }}> 145 | <Cyclop /> 146 | </View> 147 | <View style={{ marginVertical }}> 148 | <Heart /> 149 | </View> 150 | <View 151 | style={{ marginVertical, transform: [{ translateY: translateY1 }] }} 152 | > 153 | <X /> 154 | </View> 155 | <View style={{ marginVertical, transform: [{ translateY }] }}> 156 | <Robot /> 157 | </View> 158 | </View> 159 | </View> 160 | ); 161 | }; 162 | 163 | export default Roulette; 164 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Focus.tsx: -------------------------------------------------------------------------------- 1 | import { View, StyleSheet } from "react-native"; 2 | 3 | const Focus = () => { 4 | return ( 5 | <View style={StyleSheet.absoluteFillObject}> 6 | <svg 7 | width="3840" 8 | height="2160" 9 | viewBox="0 0 3840 2160" 10 | fill="none" 11 | xmlns="http://www.w3.org/2000/svg" 12 | > 13 | <g id="Group 35"> 14 | <g id="Group 31"> 15 | <g id="Group 28"> 16 | <line 17 | id="Line 6" 18 | x1="3164.83" 19 | y1="313.667" 20 | x2="3164.83" 21 | y2="447" 22 | stroke="#FF0000" 23 | /> 24 | <line 25 | id="Line 7" 26 | x1="3097.67" 27 | y1="379.833" 28 | x2="3231" 29 | y2="379.833" 30 | stroke="#FF0000" 31 | /> 32 | </g> 33 | <g id="Group 29"> 34 | <line 35 | id="Line 6_2" 36 | x1="3163.5" 37 | y1="312.333" 38 | x2="3163.5" 39 | y2="445.666" 40 | stroke="#0000FF" 41 | /> 42 | <line 43 | id="Line 7_2" 44 | x1="3096.33" 45 | y1="378.5" 46 | x2="3229.67" 47 | y2="378.5" 48 | stroke="#0000FF" 49 | /> 50 | </g> 51 | <g id="Group 30"> 52 | <line 53 | id="Line 6_3" 54 | x1="3162.17" 55 | y1="311" 56 | x2="3162.17" 57 | y2="444.333" 58 | stroke="#00FF00" 59 | /> 60 | <line 61 | id="Line 7_3" 62 | x1="3095" 63 | y1="377.167" 64 | x2="3228.33" 65 | y2="377.167" 66 | stroke="#00FF00" 67 | /> 68 | </g> 69 | </g> 70 | <g id="Group 33"> 71 | <g id="Group 28_2"> 72 | <line 73 | id="Line 6_4" 74 | x1="677.833" 75 | y1="314.667" 76 | x2="677.833" 77 | y2="448" 78 | stroke="#FF0000" 79 | /> 80 | <line 81 | id="Line 7_4" 82 | x1="610.667" 83 | y1="380.833" 84 | x2="744" 85 | y2="380.833" 86 | stroke="#FF0000" 87 | /> 88 | </g> 89 | <g id="Group 29_2"> 90 | <line 91 | id="Line 6_5" 92 | x1="676.5" 93 | y1="313.333" 94 | x2="676.5" 95 | y2="446.666" 96 | stroke="#0000FF" 97 | /> 98 | <line 99 | id="Line 7_5" 100 | x1="609.333" 101 | y1="379.5" 102 | x2="742.667" 103 | y2="379.5" 104 | stroke="#0000FF" 105 | /> 106 | </g> 107 | <g id="Group 30_2"> 108 | <line 109 | id="Line 6_6" 110 | x1="675.167" 111 | y1="312" 112 | x2="675.167" 113 | y2="445.333" 114 | stroke="#00FF00" 115 | /> 116 | <line 117 | id="Line 7_6" 118 | x1="608" 119 | y1="378.167" 120 | x2="741.333" 121 | y2="378.167" 122 | stroke="#00FF00" 123 | /> 124 | </g> 125 | </g> 126 | <g id="Group 34"> 127 | <g id="Group 28_3"> 128 | <line 129 | id="Line 6_7" 130 | x1="3167.83" 131 | y1="1716.67" 132 | x2="3167.83" 133 | y2="1850" 134 | stroke="#FF0000" 135 | /> 136 | <line 137 | id="Line 7_7" 138 | x1="3100.67" 139 | y1="1782.83" 140 | x2="3234" 141 | y2="1782.83" 142 | stroke="#FF0000" 143 | /> 144 | </g> 145 | <g id="Group 29_3"> 146 | <line 147 | id="Line 6_8" 148 | x1="3166.5" 149 | y1="1715.33" 150 | x2="3166.5" 151 | y2="1848.67" 152 | stroke="#0000FF" 153 | /> 154 | <line 155 | id="Line 7_8" 156 | x1="3099.33" 157 | y1="1781.5" 158 | x2="3232.67" 159 | y2="1781.5" 160 | stroke="#0000FF" 161 | /> 162 | </g> 163 | <g id="Group 30_3"> 164 | <line 165 | id="Line 6_9" 166 | x1="3165.17" 167 | y1="1714" 168 | x2="3165.17" 169 | y2="1847.33" 170 | stroke="#00FF00" 171 | /> 172 | <line 173 | id="Line 7_9" 174 | x1="3098" 175 | y1="1780.17" 176 | x2="3231.33" 177 | y2="1780.17" 178 | stroke="#00FF00" 179 | /> 180 | </g> 181 | </g> 182 | <g id="Group 32"> 183 | <g id="Group 28_4"> 184 | <line 185 | id="Line 6_10" 186 | x1="674.833" 187 | y1="1713.67" 188 | x2="674.833" 189 | y2="1847" 190 | stroke="#FF0000" 191 | /> 192 | <line 193 | id="Line 7_10" 194 | x1="607.667" 195 | y1="1779.83" 196 | x2="741" 197 | y2="1779.83" 198 | stroke="#FF0000" 199 | /> 200 | </g> 201 | <g id="Group 29_4"> 202 | <line 203 | id="Line 6_11" 204 | x1="673.5" 205 | y1="1712.33" 206 | x2="673.5" 207 | y2="1845.67" 208 | stroke="#0000FF" 209 | /> 210 | <line 211 | id="Line 7_11" 212 | x1="606.333" 213 | y1="1778.5" 214 | x2="739.667" 215 | y2="1778.5" 216 | stroke="#0000FF" 217 | /> 218 | </g> 219 | <g id="Group 30_4"> 220 | <line 221 | id="Line 6_12" 222 | x1="672.167" 223 | y1="1711" 224 | x2="672.167" 225 | y2="1844.33" 226 | stroke="#00FF00" 227 | /> 228 | <line 229 | id="Line 7_12" 230 | x1="605" 231 | y1="1777.17" 232 | x2="738.333" 233 | y2="1777.17" 234 | stroke="#00FF00" 235 | /> 236 | </g> 237 | </g> 238 | </g> 239 | </svg> 240 | </View> 241 | ); 242 | }; 243 | 244 | export default Focus; 245 | -------------------------------------------------------------------------------- /src/LoveDeathReact/LogoLight.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | import React from "react"; 3 | import { View, StyleSheet } from "react-native"; 4 | import { interpolate, useCurrentFrame } from "remotion"; 5 | 6 | import { Extrapolate } from "../components/Redash"; 7 | 8 | import Background from "./Background"; 9 | 10 | const LogoLight = () => { 11 | const frame = useCurrentFrame(); 12 | const rotate = interpolate(frame, [0, 10], [0, 45], Extrapolate.CLAMP); 13 | const width = 853.66; 14 | const height = interpolate( 15 | frame, 16 | [0, 10], 17 | [77.846, 177.846], 18 | Extrapolate.CLAMP 19 | ); 20 | const r1 = { 21 | x: 1208 / 2 - width / 2, 22 | y: 1208 / 2 - height / 2, 23 | width, 24 | height, 25 | transform: `rotate(-${rotate}, ${1208 / 2}, ${1208 / 2})`, 26 | }; 27 | const r2 = { 28 | x: 1208 / 2 - width / 2, 29 | y: 1208 / 2 - height / 2, 30 | width, 31 | height, 32 | transform: `rotate(-${90 + rotate}, ${1208 / 2}, ${1208 / 2})`, 33 | }; 34 | return ( 35 | <View style={{ flex: 1 }}> 36 | <Background /> 37 | <View 38 | style={{ 39 | ...StyleSheet.absoluteFillObject, 40 | justifyContent: "center", 41 | alignItems: "center", 42 | }} 43 | > 44 | <svg 45 | width="1208" 46 | height="1208" 47 | viewBox="0 0 1208 1208" 48 | fill="none" 49 | xmlns="http://www.w3.org/2000/svg" 50 | > 51 | <path 52 | d="M604.5 641.72C625.211 641.72 642 624.707 642 603.72C642 582.733 625.211 565.72 604.5 565.72C583.789 565.72 567 582.733 567 603.72C567 624.707 583.789 641.72 604.5 641.72Z" 53 | fill="black" 54 | /> 55 | <path 56 | d="M538.007 642.428C564.041 687.52 594.394 724.929 622.736 748.881C636.873 760.828 650.94 769.795 664.097 774.479C677.203 779.146 690.756 779.982 702.251 773.346C713.745 766.71 719.797 754.554 722.309 740.87C724.831 727.134 724.099 710.468 720.821 692.252C714.249 655.731 697.028 610.74 670.994 565.648C644.96 520.556 614.608 483.147 586.266 459.195C572.129 447.248 558.061 438.282 544.905 433.597C531.798 428.931 518.245 428.094 506.751 434.73C495.256 441.367 489.205 453.522 486.693 467.206C484.171 480.942 484.903 497.608 488.181 515.824C494.752 552.346 511.974 597.336 538.007 642.428Z" 57 | stroke="black" 58 | stroke-width="20" 59 | /> 60 | <path 61 | d="M604.5 680.72C656.564 680.72 704.133 673.171 739.043 660.656C756.455 654.414 771.253 646.748 781.888 637.734C792.48 628.756 800 617.471 800 604.22C800 590.969 792.48 579.684 781.888 570.707C771.253 561.693 756.455 554.026 739.043 547.784C704.133 535.269 656.564 527.72 604.5 527.72C552.436 527.72 504.867 535.269 469.957 547.784C452.545 554.026 437.747 561.693 427.112 570.707C416.52 579.684 409 590.969 409 604.22C409 617.471 416.52 628.756 427.112 637.734C437.747 646.748 452.545 654.414 469.957 660.656C504.867 673.171 552.436 680.72 604.5 680.72Z" 62 | stroke="black" 63 | stroke-width="20" 64 | /> 65 | <path 66 | d="M670.994 642.428C697.027 597.336 714.249 552.345 720.82 515.824C724.098 497.608 724.83 480.942 722.308 467.206C719.796 453.522 713.745 441.366 702.25 434.73C690.756 428.093 677.203 428.93 664.096 433.597C650.94 438.281 636.872 447.248 622.735 459.194C594.393 483.146 564.041 520.556 538.007 565.648C511.973 610.74 494.752 655.73 488.18 692.251C484.902 710.468 484.17 727.134 486.692 740.87C489.204 754.554 495.256 766.709 506.75 773.346C518.245 779.982 531.798 779.145 544.904 774.479C558.061 769.794 572.128 760.828 586.265 748.881C614.607 724.929 644.96 687.52 670.994 642.428Z" 67 | stroke="black" 68 | stroke-width="20" 69 | /> 70 | <rect 71 | x={r1.x} 72 | y={r1.y} 73 | width={r1.width} 74 | height={r1.height} 75 | transform={r1.transform} 76 | fill="black" 77 | /> 78 | <rect 79 | x={r2.x} 80 | y={r2.y} 81 | width={r2.width} 82 | height={r2.height} 83 | transform={r2.transform} 84 | fill="black" 85 | /> 86 | <mask 87 | id="mask0" 88 | mask-type="alpha" 89 | maskUnits="userSpaceOnUse" 90 | x="0" 91 | y="0" 92 | width="1208" 93 | height="1208" 94 | > 95 | <rect 96 | x={r1.x} 97 | y={r1.y} 98 | width={r1.width} 99 | height={r1.height} 100 | transform={r1.transform} 101 | fill="black" 102 | /> 103 | <rect 104 | x={r2.x} 105 | y={r2.y} 106 | width={r2.width} 107 | height={r2.height} 108 | transform={r2.transform} 109 | fill="black" 110 | /> 111 | </mask> 112 | <g mask="url(#mask0)"> 113 | <path 114 | d="M604.5 641.72C625.211 641.72 642 624.707 642 603.72C642 582.733 625.211 565.72 604.5 565.72C583.789 565.72 567 582.733 567 603.72C567 624.707 583.789 641.72 604.5 641.72Z" 115 | fill="white" 116 | /> 117 | <path 118 | d="M538.007 642.428C564.041 687.52 594.394 724.929 622.736 748.881C636.873 760.828 650.94 769.795 664.097 774.479C677.203 779.146 690.756 779.982 702.251 773.346C713.745 766.71 719.797 754.554 722.309 740.87C724.831 727.134 724.099 710.468 720.821 692.252C714.249 655.731 697.028 610.74 670.994 565.648C644.96 520.556 614.608 483.147 586.266 459.195C572.129 447.248 558.061 438.282 544.905 433.597C531.798 428.931 518.245 428.094 506.751 434.73C495.256 441.367 489.205 453.522 486.693 467.206C484.171 480.942 484.903 497.608 488.181 515.824C494.752 552.346 511.974 597.336 538.007 642.428Z" 119 | stroke="white" 120 | stroke-width="20" 121 | /> 122 | <path 123 | d="M604.5 680.72C656.564 680.72 704.133 673.171 739.043 660.656C756.455 654.414 771.253 646.748 781.888 637.734C792.48 628.756 800 617.471 800 604.22C800 590.969 792.48 579.684 781.888 570.707C771.253 561.693 756.455 554.026 739.043 547.784C704.133 535.269 656.564 527.72 604.5 527.72C552.436 527.72 504.867 535.269 469.957 547.784C452.545 554.026 437.747 561.693 427.112 570.707C416.52 579.684 409 590.969 409 604.22C409 617.471 416.52 628.756 427.112 637.734C437.747 646.748 452.545 654.414 469.957 660.656C504.867 673.171 552.436 680.72 604.5 680.72Z" 124 | stroke="white" 125 | stroke-width="20" 126 | /> 127 | <path 128 | d="M670.994 642.428C697.027 597.336 714.249 552.345 720.82 515.824C724.098 497.608 724.83 480.942 722.308 467.206C719.796 453.522 713.745 441.366 702.25 434.73C690.756 428.093 677.203 428.93 664.096 433.597C650.94 438.281 636.872 447.248 622.735 459.194C594.393 483.146 564.041 520.556 538.007 565.648C511.973 610.74 494.752 655.73 488.18 692.251C484.902 710.468 484.17 727.134 486.692 740.87C489.204 754.554 495.256 766.709 506.75 773.346C518.245 779.982 531.798 779.145 544.904 774.479C558.061 769.794 572.128 760.828 586.265 748.881C614.607 724.929 644.96 687.52 670.994 642.428Z" 129 | stroke="white" 130 | stroke-width="20" 131 | /> 132 | </g> 133 | </svg> 134 | </View> 135 | </View> 136 | ); 137 | }; 138 | 139 | export default LogoLight; 140 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Icons.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | import { View, StyleSheet } from "react-native"; 3 | import { interpolate, useCurrentFrame } from "remotion"; 4 | 5 | import { Extrapolate } from "../components/Redash"; 6 | 7 | import Background from "./Background"; 8 | 9 | const Icons = () => { 10 | const frame = useCurrentFrame(); 11 | const darkMode = frame >= 10; 12 | const fill = darkMode ? "white" : "black"; 13 | const oppositeFill = !darkMode ? "#F0E6E0" : "black"; 14 | const translate = interpolate( 15 | frame, 16 | [0, 9, 12], 17 | [0, 4, 0], 18 | Extrapolate.CLAMP 19 | ); 20 | const rotate = 45; 21 | const width = 853.66; 22 | const height = interpolate(frame, [0, 10], [10, 10], Extrapolate.CLAMP); 23 | const r1 = { 24 | x: 1208 / 2 - width / 2, 25 | y: 1208 / 2 - height / 2, 26 | width, 27 | height, 28 | transform: `rotate(-${rotate}, ${1208 / 2}, ${1208 / 2})`, 29 | }; 30 | const r2 = { 31 | x: 1208 / 2 - width / 2, 32 | y: 1208 / 2 - height / 2, 33 | width, 34 | height, 35 | transform: `rotate(-${90 + rotate}, ${1208 / 2}, ${1208 / 2})`, 36 | }; 37 | return ( 38 | <View style={{ flex: 1 }}> 39 | <Background /> 40 | {darkMode && ( 41 | <View 42 | style={{ 43 | ...StyleSheet.absoluteFillObject, 44 | flex: 1, 45 | backgroundColor: "black", 46 | }} 47 | /> 48 | )} 49 | <View 50 | style={{ 51 | ...StyleSheet.absoluteFillObject, 52 | justifyContent: "center", 53 | alignItems: "center", 54 | }} 55 | > 56 | <svg 57 | width="1208" 58 | height="1208" 59 | viewBox="0 0 1208 1208" 60 | fill="none" 61 | xmlns="http://www.w3.org/2000/svg" 62 | > 63 | <rect 64 | x={r1.x} 65 | y={r1.y} 66 | width={r1.width} 67 | height={r1.height} 68 | transform={r1.transform} 69 | fill={fill} 70 | /> 71 | <rect 72 | x={r2.x} 73 | y={r2.y} 74 | width={r2.width} 75 | height={r2.height} 76 | transform={r2.transform} 77 | fill={fill} 78 | /> 79 | </svg> 80 | </View> 81 | <View 82 | style={{ 83 | ...StyleSheet.absoluteFillObject, 84 | flexDirection: "row", 85 | justifyContent: "center", 86 | alignItems: "center", 87 | }} 88 | > 89 | <svg 90 | width="300" 91 | height="300" 92 | viewBox="0 0 48 48" 93 | fill="none" 94 | xmlns="http://www.w3.org/2000/svg" 95 | > 96 | <g> 97 | <path 98 | d="M23.2435 44.1249C23.6423 44.5864 24.3577 44.5864 24.7565 44.1249L42.832 23.2133C40.7301 24.9501 37.993 26.0002 35 26.0002C30.0806 26.0002 25.8525 23.1633 24 19.1035C22.1475 23.1633 17.9194 26.0002 13 26.0002C10.007 26.0002 7.26991 24.9501 5.16803 23.2134L23.2435 44.1249Z" 99 | fill={fill} 100 | /> 101 | <path 102 | fill-rule="evenodd" 103 | clip-rule="evenodd" 104 | d="M13 26C17.9194 26 22.1475 23.1631 24 19.1033C23.3568 17.6937 23 16.1368 23 14.5C23 12.8632 23.3568 11.3063 24 9.89672C22.1475 5.83689 17.9194 3 13 3C6.37258 3 1 8.14873 1 14.5C1 17.983 2.61569 21.1043 5.168 23.2132C7.26988 24.9499 10.007 26 13 26Z" 105 | fill={fill} 106 | /> 107 | <path 108 | d="M25 14.4998C25 12.863 24.6432 11.3061 24 9.89648C23.3568 11.3061 23 12.863 23 14.4998C23 16.1366 23.3568 17.6935 24 19.1031C24.6432 17.6936 25 16.1366 25 14.4998Z" 109 | fill={fill} 110 | /> 111 | <path 112 | d="M47 14.5C47 8.14873 41.6274 3 35 3C30.0806 3 25.8525 5.83689 24 9.89672C24.6432 11.3063 25 12.8632 25 14.5C25 16.1368 24.6432 17.6938 24 19.1033C25.8525 23.1631 30.0806 26 35 26C37.993 26 40.7301 24.9499 42.832 23.2131C45.3843 21.1043 47 17.9829 47 14.5Z" 113 | fill={fill} 114 | /> 115 | <path 116 | d="M42.832 23.2131L43.1505 23.5986L43.1829 23.5719L43.2103 23.5401L42.832 23.2131ZM24 9.89672L24.4549 9.68916L24 8.69228L23.5451 9.68916L24 9.89672ZM5.168 23.2132L4.78972 23.5401L4.81716 23.5719L4.84951 23.5986L5.168 23.2132ZM23.5451 10.1043C24.1593 11.4504 24.5 12.9367 24.5 14.5H25.5C25.5 12.7897 25.127 11.1621 24.4549 9.68916L23.5451 10.1043ZM24.5 14.5C24.5 16.0633 24.1593 17.5496 23.5451 18.8957L24.4549 19.3108C25.127 17.8379 25.5 16.2103 25.5 14.5H24.5ZM23.5451 19.3108C25.4798 23.5507 29.8868 26.5 35 26.5V25.5C30.2743 25.5 26.2253 22.7755 24.4549 18.8957L23.5451 19.3108ZM35 26.5C38.1114 26.5 40.9606 25.408 43.1505 23.5986L42.5136 22.8277C40.4997 24.4917 37.8747 25.5 35 25.5V26.5ZM23.5451 18.8957C21.7747 22.7755 17.7257 25.5 13 25.5V26.5C18.1132 26.5 22.5202 23.5507 24.4549 19.3108L23.5451 18.8957ZM24.4549 18.8957C23.8407 17.5496 23.5 16.0633 23.5 14.5H22.5C22.5 16.2103 22.873 17.8379 23.5451 19.3108L24.4549 18.8957ZM23.5 14.5C23.5 12.9367 23.8407 11.4504 24.4549 10.1043L23.5451 9.68916C22.873 11.1621 22.5 12.7897 22.5 14.5H23.5ZM43.2103 23.5401L45.6385 20.7309L44.882 20.077L42.4538 22.8862L43.2103 23.5401ZM13 25.5C10.1253 25.5 7.50037 24.4917 5.48648 22.8277L4.84951 23.5986C7.03939 25.4081 9.88864 26.5 13 26.5V25.5ZM2.36149 20.7309L4.78972 23.5401L5.54627 22.8862L3.11804 20.077L2.36149 20.7309ZM23.2435 44.1247L24 43.4708L23.2435 44.1247ZM24.7565 44.1247L24 43.4708L24.7565 44.1247ZM42.832 23.2131L42.1951 22.4423L42.1304 22.4957L42.0755 22.5592L42.832 23.2131ZM24 9.89672L23.0902 10.3119L24 12.3056L24.9098 10.3119L24 9.89672ZM5.168 23.2132L5.92454 22.5592L5.86966 22.4957L5.80496 22.4423L5.168 23.2132ZM22.4869 44.7787C23.2846 45.7015 24.7154 45.7015 25.5131 44.7787L24 43.4708L22.4869 44.7787ZM35 4C41.1157 4 46 8.74069 46 14.5H48C48 7.55676 42.1392 2 35 2V4ZM2 14.5C2 8.74069 6.88433 4 13 4V2C5.86084 2 0 7.55676 0 14.5H2ZM43.469 23.984C46.2345 21.699 48 18.3022 48 14.5H46C46 17.6637 44.5341 20.5096 42.1951 22.4423L43.469 23.984ZM35 2C29.6931 2 25.107 5.06172 23.0902 9.4816L24.9098 10.3119C26.598 6.61207 30.468 4 35 4V2ZM13 4C17.532 4 21.402 6.61207 23.0902 10.3119L24.9098 9.4816C22.893 5.06172 18.3069 2 13 2V4ZM25.5131 44.7787L43.5886 23.8671L42.0755 22.5592L24 43.4708L25.5131 44.7787ZM4.41145 23.8671L22.4869 44.7787L24 43.4708L5.92454 22.5592L4.41145 23.8671ZM5.80496 22.4423C3.46589 20.5096 2 17.6637 2 14.5H0C0 18.3022 1.76549 21.699 4.53103 23.9841L5.80496 22.4423Z" 117 | fill={fill} 118 | /> 119 | <circle cx="15" cy="20" r="5" fill={oppositeFill} /> 120 | <circle cx="33" cy="20" r="5" fill={oppositeFill} /> 121 | <rect x={8} y={10 + translate} width={17} height={5} fill={fill} /> 122 | <rect 123 | x={8} 124 | y={25 - translate} 125 | width={17} 126 | height={2 + translate} 127 | fill={fill} 128 | /> 129 | </g> 130 | </svg> 131 | <svg 132 | width="300" 133 | height="300" 134 | viewBox="0 0 48 48" 135 | fill="none" 136 | xmlns="http://www.w3.org/2000/svg" 137 | > 138 | <path 139 | d="M31.1379 36.2368H30.6379V36.7368V38.5526H18.3621V36.7368V36.2368H17.8621H13C9.96243 36.2368 7.5 33.7744 7.5 30.7368V14C7.5 7.64874 12.6487 2.5 19 2.5H30C36.3513 2.5 41.5 7.64873 41.5 14V30.7368C41.5 33.7744 39.0376 36.2368 36 36.2368H31.1379ZM16.6552 30.2895C19.5778 30.2895 21.9828 28.0113 21.9828 25.1579C21.9828 22.3045 19.5778 20.0263 16.6552 20.0263C13.7326 20.0263 11.3276 22.3045 11.3276 25.1579C11.3276 28.0113 13.7326 30.2895 16.6552 30.2895ZM32.3448 30.2895C35.2674 30.2895 37.6724 28.0113 37.6724 25.1579C37.6724 22.3045 35.2674 20.0263 32.3448 20.0263C29.4222 20.0263 27.0172 22.3045 27.0172 25.1579C27.0172 28.0113 29.4222 30.2895 32.3448 30.2895ZM18.3621 40.7105H30.6379C30.6259 43.2595 27.9921 45.5 24.5 45.5C21.0079 45.5 18.3741 43.2595 18.3621 40.7105Z" 140 | fill={fill} 141 | stroke={fill} 142 | /> 143 | </svg> 144 | <svg 145 | width="300" 146 | height="300" 147 | viewBox="0 0 48 48" 148 | fill="none" 149 | xmlns="http://www.w3.org/2000/svg" 150 | > 151 | <path 152 | d="M19.5 33V33.5H20H28H28.5V33V32V31.5H28H20H19.5V32V33ZM4.5 16C4.5 9.64873 9.64873 4.5 16 4.5H32C38.3513 4.5 43.5 9.64873 43.5 16V36C43.5 40.1421 40.1421 43.5 36 43.5H12C7.85786 43.5 4.5 40.1421 4.5 36V16ZM35 26.5C37.4853 26.5 39.5 24.4853 39.5 22C39.5 19.5147 37.4853 17.5 35 17.5C32.5147 17.5 30.5 19.5147 30.5 22C30.5 24.4853 32.5147 26.5 35 26.5ZM13 26.5C15.4853 26.5 17.5 24.4853 17.5 22C17.5 19.5147 15.4853 17.5 13 17.5C10.5147 17.5 8.5 19.5147 8.5 22C8.5 24.4853 10.5147 26.5 13 26.5Z" 153 | fill={fill} 154 | stroke={fill} 155 | /> 156 | </svg> 157 | </View> 158 | </View> 159 | ); 160 | }; 161 | 162 | export default Icons; 163 | -------------------------------------------------------------------------------- /src/LoveDeathReact/SignsLight.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | import React from "react"; 3 | import { View, StyleSheet } from "react-native"; 4 | import { interpolate, useCurrentFrame } from "remotion"; 5 | 6 | import { Extrapolate } from "../components/Redash"; 7 | 8 | const styles = StyleSheet.create({ 9 | container: { 10 | ...StyleSheet.absoluteFillObject, 11 | filter: "blur(40px)", 12 | }, 13 | }); 14 | 15 | const Background = () => { 16 | const frame = useCurrentFrame(); 17 | return ( 18 | <View style={{ flex: 1 }}> 19 | <View style={{ flex: 1, backgroundColor: "#7A7F7A" }} /> 20 | <View 21 | style={[ 22 | styles.container, 23 | { 24 | backgroundImage: `radial-gradient(#F5E8E1 ${Math.round( 25 | 61 + (-1 + Math.random(frame) * 2) 26 | )}%, #7A7F7A)`, 27 | }, 28 | ]} 29 | /> 30 | </View> 31 | ); 32 | }; 33 | 34 | const SignLights = () => { 35 | const frame = useCurrentFrame(); 36 | const translate = interpolate(frame, [0, 4], [40, 0], Extrapolate.CLAMP); 37 | return ( 38 | <View style={{ flex: 1 }}> 39 | <Background /> 40 | <View 41 | style={{ 42 | ...StyleSheet.absoluteFillObject, 43 | justifyContent: "center", 44 | alignItems: "center", 45 | flexDirection: "row", 46 | }} 47 | > 48 | <View style={{ transform: [{ translateX: -translate }] }}> 49 | <svg 50 | width="300" 51 | height="300" 52 | viewBox="0 0 48 48" 53 | fill="none" 54 | xmlns="http://www.w3.org/2000/svg" 55 | > 56 | <mask id="path-1-inside-1" fill="white"> 57 | <path d="M23.2435 44.1247C23.6423 44.5862 24.3577 44.5862 24.7565 44.1247L42.832 23.2131C40.7301 24.9499 37.993 26 35 26C30.0806 26 25.8525 23.1631 24 19.1033C22.1475 23.1631 17.9194 26 13 26C10.007 26 7.26988 24.9499 5.168 23.2132L23.2435 44.1247Z" /> 58 | <path 59 | fill-rule="evenodd" 60 | clip-rule="evenodd" 61 | d="M13 26C17.9194 26 22.1475 23.1631 24 19.1033C23.3568 17.6937 23 16.1368 23 14.5C23 12.8632 23.3568 11.3063 24 9.89672C22.1475 5.83689 17.9194 3 13 3C6.37258 3 1 8.14873 1 14.5C1 17.983 2.61569 21.1043 5.168 23.2132C7.26988 24.9499 10.007 26 13 26Z" 62 | /> 63 | <path d="M25 14.5C25 12.8632 24.6432 11.3063 24 9.89672C23.3568 11.3063 23 12.8632 23 14.5C23 16.1368 23.3568 17.6937 24 19.1033C24.6432 17.6938 25 16.1368 25 14.5Z" /> 64 | <path d="M47 14.5C47 8.14873 41.6274 3 35 3C30.0806 3 25.8525 5.83689 24 9.89672C24.6432 11.3063 25 12.8632 25 14.5C25 16.1368 24.6432 17.6938 24 19.1033C25.8525 23.1631 30.0806 26 35 26C37.993 26 40.7301 24.9499 42.832 23.2131C45.3843 21.1043 47 17.9829 47 14.5Z" /> 65 | </mask> 66 | <path 67 | d="M23.2435 44.1247C23.6423 44.5862 24.3577 44.5862 24.7565 44.1247L42.832 23.2131C40.7301 24.9499 37.993 26 35 26C30.0806 26 25.8525 23.1631 24 19.1033C22.1475 23.1631 17.9194 26 13 26C10.007 26 7.26988 24.9499 5.168 23.2132L23.2435 44.1247Z" 68 | fill="black" 69 | /> 70 | <path 71 | fill-rule="evenodd" 72 | clip-rule="evenodd" 73 | d="M13 26C17.9194 26 22.1475 23.1631 24 19.1033C23.3568 17.6937 23 16.1368 23 14.5C23 12.8632 23.3568 11.3063 24 9.89672C22.1475 5.83689 17.9194 3 13 3C6.37258 3 1 8.14873 1 14.5C1 17.983 2.61569 21.1043 5.168 23.2132C7.26988 24.9499 10.007 26 13 26Z" 74 | fill="black" 75 | /> 76 | <path 77 | d="M25 14.5C25 12.8632 24.6432 11.3063 24 9.89672C23.3568 11.3063 23 12.8632 23 14.5C23 16.1368 23.3568 17.6937 24 19.1033C24.6432 17.6938 25 16.1368 25 14.5Z" 78 | fill="black" 79 | /> 80 | <path 81 | d="M47 14.5C47 8.14873 41.6274 3 35 3C30.0806 3 25.8525 5.83689 24 9.89672C24.6432 11.3063 25 12.8632 25 14.5C25 16.1368 24.6432 17.6938 24 19.1033C25.8525 23.1631 30.0806 26 35 26C37.993 26 40.7301 24.9499 42.832 23.2131C45.3843 21.1043 47 17.9829 47 14.5Z" 82 | fill="black" 83 | /> 84 | <path 85 | d="M42.832 23.2131L43.1505 23.5986L43.1829 23.5719L43.2103 23.5401L42.832 23.2131ZM24 9.89672L24.4549 9.68916L24 8.69228L23.5451 9.68916L24 9.89672ZM5.168 23.2132L4.78972 23.5401L4.81716 23.5719L4.84951 23.5986L5.168 23.2132ZM23.5451 10.1043C24.1593 11.4504 24.5 12.9367 24.5 14.5H25.5C25.5 12.7897 25.127 11.1621 24.4549 9.68916L23.5451 10.1043ZM24.5 14.5C24.5 16.0633 24.1593 17.5496 23.5451 18.8957L24.4549 19.3108C25.127 17.8379 25.5 16.2103 25.5 14.5H24.5ZM23.5451 19.3108C25.4798 23.5507 29.8868 26.5 35 26.5V25.5C30.2743 25.5 26.2253 22.7755 24.4549 18.8957L23.5451 19.3108ZM35 26.5C38.1114 26.5 40.9606 25.408 43.1505 23.5986L42.5136 22.8277C40.4997 24.4917 37.8747 25.5 35 25.5V26.5ZM23.5451 18.8957C21.7747 22.7755 17.7257 25.5 13 25.5V26.5C18.1132 26.5 22.5202 23.5507 24.4549 19.3108L23.5451 18.8957ZM24.4549 18.8957C23.8407 17.5496 23.5 16.0633 23.5 14.5H22.5C22.5 16.2103 22.873 17.8379 23.5451 19.3108L24.4549 18.8957ZM23.5 14.5C23.5 12.9367 23.8407 11.4504 24.4549 10.1043L23.5451 9.68916C22.873 11.1621 22.5 12.7897 22.5 14.5H23.5ZM43.2103 23.5401L45.6385 20.7309L44.882 20.077L42.4538 22.8862L43.2103 23.5401ZM13 25.5C10.1253 25.5 7.50037 24.4917 5.48648 22.8277L4.84951 23.5986C7.03939 25.4081 9.88864 26.5 13 26.5V25.5ZM2.36149 20.7309L4.78972 23.5401L5.54627 22.8862L3.11804 20.077L2.36149 20.7309ZM23.2435 44.1247L24 43.4708L24 43.4708L23.2435 44.1247ZM24.7565 44.1247L24 43.4708L24 43.4708L24.7565 44.1247ZM42.832 23.2131L42.1951 22.4423L42.1304 22.4957L42.0755 22.5592L42.832 23.2131ZM24 9.89672L23.0902 10.3119L24 12.3056L24.9098 10.3119L24 9.89672ZM5.168 23.2132L5.92454 22.5592L5.86966 22.4957L5.80496 22.4423L5.168 23.2132ZM22.4869 44.7787C23.2846 45.7015 24.7154 45.7015 25.5131 44.7787L24 43.4708H24L22.4869 44.7787ZM35 4C41.1157 4 46 8.74069 46 14.5H48C48 7.55676 42.1392 2 35 2V4ZM2 14.5C2 8.74069 6.88433 4 13 4V2C5.86084 2 0 7.55676 0 14.5H2ZM43.469 23.984C46.2345 21.699 48 18.3022 48 14.5H46C46 17.6637 44.5341 20.5096 42.1951 22.4423L43.469 23.984ZM35 2C29.6931 2 25.107 5.06172 23.0902 9.4816L24.9098 10.3119C26.598 6.61207 30.468 4 35 4V2ZM13 4C17.532 4 21.402 6.61207 23.0902 10.3119L24.9098 9.4816C22.893 5.06172 18.3069 2 13 2V4ZM25.5131 44.7787L43.5886 23.8671L42.0755 22.5592L24 43.4708L25.5131 44.7787ZM4.41145 23.8671L22.4869 44.7787L24 43.4708L5.92454 22.5592L4.41145 23.8671ZM5.80496 22.4423C3.46589 20.5096 2 17.6637 2 14.5H0C0 18.3022 1.76549 21.699 4.53103 23.9841L5.80496 22.4423Z" 86 | fill="black" 87 | mask="url(#path-1-inside-1)" 88 | /> 89 | </svg> 90 | </View> 91 | <View style={{ transform: [{ translateY: translate }] }}> 92 | <svg 93 | width="300" 94 | height="300" 95 | viewBox="0 0 48 48" 96 | fill="none" 97 | xmlns="http://www.w3.org/2000/svg" 98 | > 99 | <path 100 | d="M36.4836 2L45.8883 11.4286L32.5 24.447L41.8883 34C43.0687 35.1145 43.5809 36.246 43.5809 38C43.5809 41.3752 40.8517 44.1114 37.485 44.1114C35.8347 44.1114 34.9858 43.8631 33.8883 42.7952L24.2448 33.1272L11.4046 46L2 36.5714L14.8401 23.6986L4.38825 13.2201C4.25347 13.0931 4.12993 12.9695 4.01682 12.8477C3.13705 11.9001 2.88825 11.0561 2.88825 9.5C2.88825 6.12475 5.61748 3.38858 8.98415 3.38858C10.7359 3.38858 12.2763 3.81388 13.3883 5L23.3651 15.1519L36.4836 2Z" 101 | fill="black" 102 | /> 103 | </svg> 104 | </View> 105 | <View style={{ transform: [{ translateX: translate }] }}> 106 | <svg 107 | width="300" 108 | height="300" 109 | viewBox="0 0 48 48" 110 | fill="none" 111 | xmlns="http://www.w3.org/2000/svg" 112 | > 113 | <path 114 | d="M12.6519 42.904C12.5936 42.855 12.5094 42.8012 12.4027 42.7743C12.3451 42.4444 12.2919 41.8439 12.2794 40.8207L12.2733 40.3268L11.7794 40.3268L10.8045 40.3268L10.3045 40.3268V40.8268V47.1289C10.2759 47.1137 10.2477 47.0947 10.2206 47.0712C10.0739 46.9441 9.84637 46.5919 9.84637 45.6872C9.84637 44.7126 9.92658 43.9804 9.98933 43.4088L9.99307 43.3747C10.0348 42.9951 10.0734 42.6441 10.0594 42.3532C10.0442 42.0354 9.96411 41.7095 9.69992 41.4453C9.49366 41.2391 9.24 41.1936 9.05005 41.191C8.88054 41.1887 8.70129 41.2205 8.56946 41.244L8.54981 41.2475C8.24115 41.3021 8.06793 41.3207 7.92884 41.2674C7.8366 41.2321 7.6483 41.118 7.49008 40.5851L7.40713 40.3057L7.12315 40.2402C5.62019 39.8935 4.5 38.5463 4.5 36.9386V0.5H40.9386C42.8099 0.5 44.3268 2.01698 44.3268 3.88827V36.9386C44.3268 38.8099 42.8099 40.3268 40.9386 40.3268L13.7207 40.3268H13.2207V40.8268V45.075C13.1875 44.4833 13.1272 44.046 13.0535 43.7275C12.9973 43.4849 12.9275 43.2848 12.8388 43.1326C12.7943 43.0565 12.7343 42.9734 12.6519 42.904ZM14.2067 17.9972C16.8987 17.9972 19.081 15.8149 19.081 13.1229C19.081 10.4309 16.8987 8.24861 14.2067 8.24861C11.5147 8.24861 9.3324 10.4309 9.3324 13.1229C9.3324 15.8149 11.5147 17.9972 14.2067 17.9972ZM33.6481 17.9972C36.3401 17.9972 38.5224 15.8149 38.5224 13.1229C38.5224 10.4309 36.3401 8.24861 33.6481 8.24861C30.9561 8.24861 28.7738 10.4309 28.7738 13.1229C28.7738 15.8149 30.9561 17.9972 33.6481 17.9972Z" 115 | fill="black" 116 | stroke="black" 117 | /> 118 | </svg> 119 | </View> 120 | </View> 121 | </View> 122 | ); 123 | }; 124 | 125 | export default SignLights; 126 | -------------------------------------------------------------------------------- /src/LoveDeathReact/MainTitle.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-len */ 2 | import { View } from "react-native"; 3 | import { interpolate, useCurrentFrame } from "remotion"; 4 | 5 | import { Extrapolate } from "../components/Redash"; 6 | 7 | import Focus from "./Focus"; 8 | 9 | const MainTitle = () => { 10 | const frame = useCurrentFrame(); 11 | const ov = frame >= 3; 12 | const scale = interpolate(frame, [1, 5], [1.5, 1], Extrapolate.CLAMP); 13 | const translateYL = interpolate(frame, [1, 4], [-500, 0], Extrapolate.CLAMP); 14 | const legLength = interpolate( 15 | frame, 16 | [1, 8], 17 | [2259.86 * 2, 2259.86], 18 | Extrapolate.CLAMP 19 | ); 20 | const legLength3 = interpolate( 21 | frame, 22 | [1, 6], 23 | [2279.36 * 1.5, 2279.36], 24 | Extrapolate.CLAMP 25 | ); 26 | const L = `M2184.36 707.5H${legLength}V757.5H2184.36V860H${legLength3}V910H2129.36V560H${legLength3}V610H2184.36V707.5Z`; 27 | const Plus = interpolate( 28 | frame, 29 | [1, 10], 30 | [1952.27 * 2, 1952.27], 31 | Extrapolate.CLAMP 32 | ); 33 | const width = interpolate( 34 | frame, 35 | [0, 6], 36 | [1563.95 + 707.64, 0], 37 | Extrapolate.CLAMP 38 | ); 39 | const x = interpolate( 40 | frame, 41 | [0, 6], 42 | [0, 1563.95 + 707.64], 43 | Extrapolate.CLAMP 44 | ); 45 | const R = frame >= 12; 46 | const translateYA = interpolate(frame, [12, 15], [200, 0], Extrapolate.CLAMP); 47 | const translateYC = interpolate(frame, [12, 15], [100, 0], Extrapolate.CLAMP); 48 | const T = interpolate( 49 | frame, 50 | [13, 17], 51 | [2275.03 * 2, 2275.03], 52 | Extrapolate.CLAMP 53 | ); 54 | const focus = frame >= 11 && frame <= 25; 55 | const blur = interpolate(frame, [26, 34, 40], [0, 20, 0], Extrapolate.CLAMP); 56 | return ( 57 | <View 58 | style={{ 59 | flex: 1, 60 | backgroundColor: "black", 61 | transform: [{ scale }], 62 | }} 63 | > 64 | <View 65 | style={{ 66 | filter: `blur(${blur}px)`, 67 | }} 68 | > 69 | <svg 70 | width="3840" 71 | height="2160" 72 | viewBox="0 0 3840 2160" 73 | fill="none" 74 | xmlns="http://www.w3.org/2000/svg" 75 | > 76 | <rect fill="white" height="262.5" width={width} x={x} y={962.5} /> 77 | <g id="Group 27"> 78 | <g id="LOVE"> 79 | <path 80 | d="M1561 560H1616V860H1706.5V910H1561V560Z" 81 | fill="white" 82 | transform={`translate(0, ${translateYL})`} 83 | /> 84 | <path 85 | d="M1780.93 829.5C1780.93 842.167 1783.43 851.167 1788.43 856.5C1793.77 861.5 1800.77 864 1809.43 864C1818.1 864 1824.93 861.5 1829.93 856.5C1835.27 851.167 1837.93 842.167 1837.93 829.5V640.5C1837.93 627.833 1835.27 619 1829.93 614C1824.93 608.667 1818.1 606 1809.43 606C1800.77 606 1793.77 608.667 1788.43 614C1783.43 619 1780.93 627.833 1780.93 640.5V829.5ZM1725.93 644C1725.93 615.667 1733.1 594 1747.43 579C1761.77 563.667 1782.43 556 1809.43 556C1836.43 556 1857.1 563.667 1871.43 579C1885.77 594 1892.93 615.667 1892.93 644V826C1892.93 854.333 1885.77 876.167 1871.43 891.5C1857.1 906.5 1836.43 914 1809.43 914C1782.43 914 1761.77 906.5 1747.43 891.5C1733.1 876.167 1725.93 854.333 1725.93 826V644Z" 86 | fill={ov ? "white" : "transparent"} 87 | /> 88 | <path 89 | d="M2011.19 845.5L2053.19 560H2103.69L2049.69 910H1967.69L1913.69 560H1969.19L2011.19 845.5Z" 90 | fill={ov ? "white" : "transparent"} 91 | /> 92 | <path d={L} fill="white" /> 93 | </g> 94 | <g id="DEATH"> 95 | <path 96 | d="M1563.95 962.5H1629.2C1649.95 962.5 1665.32 968 1675.32 979C1685.57 990 1690.7 1006.13 1690.7 1027.38V1160.13C1690.7 1181.38 1685.57 1197.5 1675.32 1208.5C1665.32 1219.5 1649.95 1225 1629.2 1225H1563.95V962.5ZM1605.2 1000V1187.5H1628.45C1634.95 1187.5 1640.07 1185.63 1643.82 1181.88C1647.57 1178.13 1649.45 1171.5 1649.45 1162V1025.5C1649.45 1016 1647.57 1009.38 1643.82 1005.63C1640.07 1001.88 1634.95 1000 1628.45 1000H1605.2Z" 97 | fill={ov ? "white" : "transparent"} 98 | /> 99 | <path 100 | d="M1758.27 1073.13H1814.9V1110.63H1758.27V1187.5H1829.52V1225H1717.02V962.5H1829.52V1000H1758.27V1073.13Z" 101 | fill={ov ? "white" : "transparent"} 102 | /> 103 | <path 104 | d="M1988.58 1225H1946.96L1939.83 1177.38H1889.21L1882.08 1225H1844.21L1886.21 962.5H1946.58L1988.58 1225ZM1894.46 1141.75H1934.21L1914.33 1009L1894.46 1141.75Z" 105 | fill={ov ? "white" : "transparent"} 106 | /> 107 | <path 108 | d="M1995.79 962.5H2123.29V1000H2080.17V1225H2038.92V1000H1995.79V962.5Z" 109 | fill={ov ? "white" : "transparent"} 110 | /> 111 | <path 112 | d="M2182.71 1225H2141.46V962.5H2182.71V1075H2229.59V962.5H2271.59V1225H2229.59V1112.5H2182.71V1225Z" 113 | fill={ov ? "white" : "transparent"} 114 | /> 115 | </g> 116 | <g id="React"> 117 | <path 118 | d="M1638.88 1600C1638.48 1598.6 1638.08 1597.3 1637.68 1596.1C1637.28 1594.9 1636.88 1593.4 1636.48 1591.6C1636.28 1589.8 1636.08 1587.5 1635.88 1584.7C1635.88 1581.9 1635.88 1578.4 1635.88 1574.2V1541.2C1635.88 1531.4 1634.18 1524.5 1630.78 1520.5C1627.38 1516.5 1621.88 1514.5 1614.28 1514.5H1602.88V1600H1569.88V1390H1619.68C1636.88 1390 1649.28 1394 1656.88 1402C1664.68 1410 1668.58 1422.1 1668.58 1438.3V1454.8C1668.58 1476.4 1661.38 1490.6 1646.98 1497.4C1655.38 1500.8 1661.08 1506.4 1664.08 1514.2C1667.28 1521.8 1668.88 1531.1 1668.88 1542.1V1574.5C1668.88 1579.7 1669.08 1584.3 1669.48 1588.3C1669.88 1592.1 1670.88 1596 1672.48 1600H1638.88ZM1602.88 1420V1484.5H1615.78C1621.98 1484.5 1626.78 1482.9 1630.18 1479.7C1633.78 1476.5 1635.58 1470.7 1635.58 1462.3V1441.6C1635.58 1434 1634.18 1428.5 1631.38 1425.1C1628.78 1421.7 1624.58 1420 1618.78 1420H1602.88Z" 119 | fill={R ? "white" : "transparent"} 120 | /> 121 | <path 122 | d="M1759.58 1478.5H1804.88V1508.5H1759.58V1570H1816.58V1600H1726.58V1390H1816.58V1420H1759.58V1478.5Z" 123 | fill={frame >= 26 ? "white" : "transparent"} 124 | /> 125 | <path 126 | d="M1979.83 1600H1946.53L1940.83 1561.9H1900.33L1894.63 1600H1864.33L1897.93 1390H1946.23L1979.83 1600ZM1904.53 1533.4H1936.33L1920.43 1427.2L1904.53 1533.4Z" 127 | fill={frame >= 24 ? "white" : "transparent"} 128 | /> 129 | <path 130 | d="M2126.61 1521.7V1549.6C2126.61 1566.6 2122.41 1579.7 2114.01 1588.9C2105.81 1597.9 2093.61 1602.4 2077.41 1602.4C2061.21 1602.4 2048.91 1597.9 2040.51 1588.9C2032.31 1579.7 2028.21 1566.6 2028.21 1549.6V1440.4C2028.21 1423.4 2032.31 1410.4 2040.51 1401.4C2048.91 1392.2 2061.21 1387.6 2077.41 1387.6C2093.61 1387.6 2105.81 1392.2 2114.01 1401.4C2122.41 1410.4 2126.61 1423.4 2126.61 1440.4V1460.8H2095.41V1438.3C2095.41 1430.7 2093.81 1425.4 2090.61 1422.4C2087.61 1419.2 2083.51 1417.6 2078.31 1417.6C2073.11 1417.6 2068.91 1419.2 2065.71 1422.4C2062.71 1425.4 2061.21 1430.7 2061.21 1438.3V1551.7C2061.21 1559.3 2062.71 1564.6 2065.71 1567.6C2068.91 1570.6 2073.11 1572.1 2078.31 1572.1C2083.51 1572.1 2087.61 1570.6 2090.61 1567.6C2093.81 1564.6 2095.41 1559.3 2095.41 1551.7V1521.7H2126.61Z" 131 | fill={R ? "white" : "transparent"} 132 | transform={`translate(0, ${translateYC})`} 133 | /> 134 | <path 135 | d={`M2173.03 1390H${T}V1420H2240.53V1600H2207.53V1420H2173.03V1390Z`} 136 | fill={R ? "white" : "transparent"} 137 | transform={`translate(0, ${translateYA})`} 138 | /> 139 | </g> 140 | <g id="ReactReversed"> 141 | <path 142 | d="M2202.87 1601.4C2203.27 1600 2203.67 1598.7 2204.07 1597.5C2204.47 1596.3 2204.87 1594.8 2205.27 1593C2205.47 1591.2 2205.67 1588.9 2205.87 1586.1C2205.87 1583.3 2205.87 1579.8 2205.87 1575.6V1542.6C2205.87 1532.8 2207.57 1525.9 2210.97 1521.9C2214.37 1517.9 2219.87 1515.9 2227.47 1515.9H2238.87V1601.4H2271.87V1391.4H2222.07C2204.87 1391.4 2192.47 1395.4 2184.87 1403.4C2177.07 1411.4 2173.17 1423.5 2173.17 1439.7V1456.2C2173.17 1477.8 2180.37 1492 2194.77 1498.8C2186.37 1502.2 2180.67 1507.8 2177.67 1515.6C2174.47 1523.2 2172.87 1532.5 2172.87 1543.5V1575.9C2172.87 1581.1 2172.67 1585.7 2172.27 1589.7C2171.87 1593.5 2170.87 1597.4 2169.27 1601.4H2202.87ZM2238.87 1421.4V1485.9H2225.97C2219.77 1485.9 2214.97 1484.3 2211.57 1481.1C2207.97 1477.9 2206.17 1472.1 2206.17 1463.7V1443C2206.17 1435.4 2207.57 1429.9 2210.37 1426.5C2212.97 1423.1 2217.17 1421.4 2222.97 1421.4H2238.87Z" 143 | fill="transparent" 144 | /> 145 | <path 146 | d="M2082.17 1479.9H2036.87V1509.9H2082.17V1571.4H2025.17V1601.4H2115.17V1391.4H2025.17V1421.4H2082.17V1479.9Z" 147 | fill={frame >= 15 && frame < 26 ? "white" : "transparent"} 148 | transform="translate(-300)" 149 | /> 150 | <path 151 | d="M1861.92 1391.4H1895.22L1900.92 1429.5H1941.42L1947.12 1391.4H1977.42L1943.82 1601.4H1895.52L1861.92 1391.4ZM1937.22 1458H1905.42L1921.32 1564.2L1937.22 1458Z" 152 | fill={frame >= 20 && frame < 24 ? "white" : "transparent"} 153 | /> 154 | <path 155 | d="M1715.14 1523.1V1551C1715.14 1568 1719.34 1581.1 1727.74 1590.3C1735.94 1599.3 1748.14 1603.8 1764.34 1603.8C1780.54 1603.8 1792.84 1599.3 1801.24 1590.3C1809.44 1581.1 1813.54 1568 1813.54 1551V1441.8C1813.54 1424.8 1809.44 1411.8 1801.24 1402.8C1792.84 1393.6 1780.54 1389 1764.34 1389C1748.14 1389 1735.94 1393.6 1727.74 1402.8C1719.34 1411.8 1715.14 1424.8 1715.14 1441.8V1462.2H1746.34V1439.7C1746.34 1432.1 1747.94 1426.8 1751.14 1423.8C1754.14 1420.6 1758.24 1419 1763.44 1419C1768.64 1419 1772.84 1420.6 1776.04 1423.8C1779.04 1426.8 1780.54 1432.1 1780.54 1439.7V1553.1C1780.54 1560.7 1779.04 1566 1776.04 1569C1772.84 1572 1768.64 1573.5 1763.44 1573.5C1758.24 1573.5 1754.14 1572 1751.14 1569C1747.94 1566 1746.34 1560.7 1746.34 1553.1V1523.1H1715.14Z" 156 | fill="transparent" 157 | /> 158 | <path 159 | d="M1668.72 1391.4H1566.72V1421.4H1601.22V1601.4H1634.22V1421.4H1668.72V1391.4Z" 160 | fill="transparent" 161 | /> 162 | </g> 163 | <path 164 | id="+" 165 | d={`M1925.47 1297.2H${Plus}V1312.8H1925.47V1340.2H1909.87V1312.8H1883.07V1297.2H1909.87V1270.2H1925.47V1297.2Z`} 166 | fill="white" 167 | /> 168 | </g> 169 | </svg> 170 | {focus && <Focus />} 171 | </View> 172 | </View> 173 | ); 174 | }; 175 | 176 | export default MainTitle; 177 | -------------------------------------------------------------------------------- /src/LoveDeathReact/Title.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-nested-ternary */ 2 | /* eslint-disable max-len */ 3 | 4 | import { interpolate, useCurrentFrame } from "remotion"; 5 | 6 | import { Extrapolate } from "../components/Redash"; 7 | 8 | interface TitleProps { 9 | darkMode: boolean; 10 | still: boolean; 11 | } 12 | 13 | const Title = ({ darkMode, still }: TitleProps) => { 14 | const currentFrame = useCurrentFrame(); 15 | const frame = still ? 0 : currentFrame; 16 | const everythingIsGone = frame >= 17; 17 | const fill = everythingIsGone ? "transparent" : darkMode ? "white" : "black"; 18 | const nIsGone = frame >= 5; 19 | const oIsGone = frame >= 7; 20 | const eIsGone = frame >= 9; 21 | const tIsGone = frame >= 10; 22 | const reversedEisGone = frame >= 12; 23 | const isAreGone = frame >= 13; 24 | const xAndLAreGone = frame >= 14; 25 | const rAndLAreGone = frame >= 15; 26 | const showSquares = frame >= 16; 27 | const aIsGone = frame >= 17; 28 | const lIsGone = frame >= 18; 29 | const rectangleIsVisible = frame >= 20 && frame < 23; 30 | const XIsVisible = frame >= 22 && frame < 24; 31 | return ( 32 | <svg 33 | width={550} 34 | height={400} 35 | viewBox="0 0 550 400" 36 | fill="none" 37 | xmlns="http://www.w3.org/2000/svg" 38 | > 39 | <rect 40 | x="1" 41 | y="1" 42 | width="548" 43 | height="398" 44 | stroke-width="1" 45 | stroke={rectangleIsVisible ? "black" : "transparent"} 46 | /> 47 | <line 48 | x1="170.348" 49 | y1="301.823" 50 | x2="376.823" 51 | y2="95.3482" 52 | stroke-width="4" 53 | stroke={XIsVisible ? "black" : "transparent"} 54 | /> 55 | <line 56 | x1="173.177" 57 | y1="95.3482" 58 | x2="379.652" 59 | y2="301.823" 60 | stroke-width="4" 61 | stroke={XIsVisible ? "black" : "transparent"} 62 | /> 63 | <g id="flatten"> 64 | <g id="ORIGINAL"> 65 | <path 66 | d="M33.1976 223.263C23.2076 223.263 15.5609 220.426 10.2576 214.753C4.95424 209.08 2.30257 201.063 2.30257 190.703V122.623C2.30257 112.263 4.95424 104.246 10.2576 98.5731C15.5609 92.8998 23.2076 90.0631 33.1976 90.0631C43.1876 90.0631 50.8342 92.8998 56.1376 98.5731C61.4409 104.246 64.0926 112.263 64.0926 122.623V190.703C64.0926 201.063 61.4409 209.08 56.1376 214.753C50.8342 220.426 43.1876 223.263 33.1976 223.263ZM33.1976 204.763C40.2276 204.763 43.7426 200.508 43.7426 191.998V121.328C43.7426 112.818 40.2276 108.563 33.1976 108.563C26.1676 108.563 22.6526 112.818 22.6526 121.328V191.998C22.6526 200.508 26.1676 204.763 33.1976 204.763Z" 67 | fill={oIsGone ? "transparent" : fill} 68 | /> 69 | <path 70 | d="M83.4048 91.9131H113.56C124.043 91.9131 131.69 94.3798 136.5 99.3131C141.31 104.123 143.715 111.585 143.715 121.698V129.653C143.715 143.096 139.275 151.606 130.395 155.183V155.553C135.328 157.033 138.782 160.055 140.755 164.618C142.852 169.181 143.9 175.286 143.9 182.933V205.688C143.9 209.388 144.023 212.41 144.27 214.753C144.517 216.973 145.133 219.193 146.12 221.413H125.4C124.66 219.316 124.167 217.343 123.92 215.493C123.673 213.643 123.55 210.313 123.55 205.503V181.823C123.55 175.903 122.563 171.771 120.59 169.428C118.74 167.085 115.472 165.913 110.785 165.913H103.755V221.413H83.4048V91.9131ZM111.155 147.413C115.225 147.413 118.247 146.365 120.22 144.268C122.317 142.171 123.365 138.656 123.365 133.723V123.733C123.365 119.046 122.502 115.655 120.775 113.558C119.172 111.461 116.582 110.413 113.005 110.413H103.755V147.413H111.155Z" 71 | fill={rAndLAreGone ? "transparent" : fill} 72 | /> 73 | <path 74 | d="M163.569 91.9131H183.919V221.413H163.569V91.9131Z" 75 | fill={isAreGone ? "transparent" : fill} 76 | /> 77 | <path 78 | d="M233.57 223.263C223.703 223.263 216.18 220.488 211 214.938C205.82 209.265 203.23 201.186 203.23 190.703V122.623C203.23 112.14 205.82 104.123 211 98.5731C216.18 92.8998 223.703 90.0631 233.57 90.0631C243.437 90.0631 250.96 92.8998 256.14 98.5731C261.32 104.123 263.91 112.14 263.91 122.623V133.723H244.67V121.328C244.67 112.818 241.155 108.563 234.125 108.563C227.095 108.563 223.58 112.818 223.58 121.328V192.183C223.58 200.57 227.095 204.763 234.125 204.763C241.155 204.763 244.67 200.57 244.67 192.183V166.838H234.495V148.338H263.91V190.703C263.91 201.186 261.32 209.265 256.14 214.938C250.96 220.488 243.437 223.263 233.57 223.263Z" 79 | fill={fill} 80 | /> 81 | <path 82 | d={`M282.526 91.9131H302.876V${interpolate( 83 | frame, 84 | [11, 11 + 2], 85 | [221.413, 91.9131], 86 | Extrapolate.CLAMP 87 | )}H282.526V${interpolate( 88 | frame, 89 | [11, 11 + 2], 90 | [91.9131, 221.413], 91 | Extrapolate.CLAMP 92 | )}Z`} 93 | fill={isAreGone ? "transparent" : fill} 94 | /> 95 | <path 96 | d="M323.666 91.9131H349.196L368.991 169.428H369.361V91.9131H387.491V221.413H366.586L342.166 126.878H341.796V221.413H323.666V91.9131Z" 97 | fill={fill} 98 | /> 99 | <path 100 | d="M423.892 91.9131H451.457L472.547 221.413H452.197L448.497 195.698V196.068H425.372L421.672 221.413H402.802L423.892 91.9131ZM446.092 178.493L437.027 114.483H436.657L427.777 178.493H446.092Z" 101 | fill={aIsGone ? "transparent" : fill} 102 | /> 103 | <path 104 | d="M487.97 91.9131H508.319V202.913H541.805V221.413H487.97V91.9131Z" 105 | fill={rAndLAreGone ? "transparent" : fill} 106 | /> 107 | </g> 108 | <g id="SERIES"> 109 | <path 110 | d="M41.2207 355.19C67.334 355.19 82.7832 342.681 82.7832 322.993V322.925C82.7832 307.134 73.0762 298.657 52.1582 294.624L42.041 292.71C31.4453 290.728 26.7969 287.925 26.7969 282.593V282.524C26.7969 276.851 31.9922 272.681 41.2207 272.681C50.2441 272.681 56.6016 276.714 57.3535 283.208L57.4219 283.96H80.7324L80.6641 282.524C79.7754 264.614 65.7617 252.993 41.0156 252.993C18.3887 252.993 1.91406 265.229 1.91406 284.233V284.302C1.91406 299.409 12.2363 309.048 31.7871 312.671L41.9043 314.585C53.457 316.841 57.832 319.438 57.832 325.044V325.112C57.832 331.265 51.6797 335.503 41.6992 335.503C32.0605 335.503 24.6777 331.333 23.4473 324.976L23.3105 324.224H0L0.0683594 325.454C1.16211 344.321 16.6797 355.19 41.2207 355.19Z" 111 | fill={fill} 112 | /> 113 | <path 114 | d="M108.404 353.413H176.012V333.247H133.492V313.286H173.482V294.419H133.492V274.937H176.012V254.771H108.404V353.413Z" 115 | fill={fill} 116 | /> 117 | <path 118 | d="M204.162 353.413H229.25V319.438H242.033L258.986 353.413H287.15L267.395 315.679C277.648 311.235 284.211 300.298 284.211 287.651V287.515C284.211 266.597 270.744 254.771 246.887 254.771H204.162V353.413ZM229.25 301.255V273.706H243.947C252.766 273.706 258.645 279.175 258.645 287.446V287.583C258.645 295.923 252.971 301.255 244.084 301.255H229.25Z" 119 | fill={fill} 120 | /> 121 | <path 122 | d="M310.857 353.413H335.945V254.771H310.857V353.413Z" 123 | fill={fill} 124 | /> 125 | <path 126 | d="M364.916 353.413H432.523V333.247H390.004V313.286H429.994V294.419H390.004V274.937H432.523V254.771H364.916V353.413Z" 127 | fill={fill} 128 | /> 129 | <path 130 | d="M498.682 355.19C524.795 355.19 540.244 342.681 540.244 322.993V322.925C540.244 307.134 530.537 298.657 509.619 294.624L499.502 292.71C488.906 290.728 484.258 287.925 484.258 282.593V282.524C484.258 276.851 489.453 272.681 498.682 272.681C507.705 272.681 514.062 276.714 514.814 283.208L514.883 283.96H538.193L538.125 282.524C537.236 264.614 523.223 252.993 498.477 252.993C475.85 252.993 459.375 265.229 459.375 284.233V284.302C459.375 299.409 469.697 309.048 489.248 312.671L499.365 314.585C510.918 316.841 515.293 319.438 515.293 325.044V325.112C515.293 331.265 509.141 335.503 499.16 335.503C489.521 335.503 482.139 331.333 480.908 324.976L480.771 324.224H457.461L457.529 325.454C458.623 344.321 474.141 355.19 498.682 355.19Z" 131 | fill={fill} 132 | /> 133 | </g> 134 | <g id="A NETFLIX"> 135 | <path 136 | d="M0 64.5117H13.9307L18.6768 49.1309H40.957L45.7031 64.5117H59.6777L37.6172 1.09863H22.0166L0 64.5117ZM29.707 13.4033H29.9707L37.8809 39.1992H21.7529L29.707 13.4033Z" 137 | fill={isAreGone ? "transparent" : fill} 138 | /> 139 | <path 140 | d="M84.0234 64.5117H97.2949V41.5283H107.93L119.751 64.5117H134.78L121.421 39.5508C128.452 36.7822 132.891 29.8389 132.891 21.4893V21.4014C132.891 8.65723 124.453 1.09863 110.215 1.09863H84.0234V64.5117ZM97.2949 31.4648V11.4697H108.589C115.137 11.4697 119.312 15.3369 119.312 21.4014V21.4893C119.312 27.7295 115.356 31.4648 108.765 31.4648H97.2949Z" 141 | fill={nIsGone ? "transparent" : fill} 142 | /> 143 | <path 144 | d="M141.68 64.5117H183.691V53.5693H154.951V37.6172H182.065V27.2461H154.951V12.041H183.691V1.09863H141.68V64.5117Z" 145 | fill={eIsGone ? "transparent" : fill} 146 | /> 147 | <path 148 | d="M193.271 64.5117H205.093V21.6211H205.444L222.583 64.5117H230.933L248.027 21.6211H248.423V64.5117H260.244V1.09863H244.907L226.89 46.6699H226.626L208.608 1.09863H193.271V64.5117Z" 149 | fill={!xAndLAreGone ? fill : "transparent"} 150 | /> 151 | <path 152 | d="M299.399 65.6104C318.252 65.6104 329.985 52.998 329.985 32.8271V32.7393C329.985 12.6123 318.208 0 299.399 0C280.635 0 268.813 12.5684 268.813 32.7393V32.8271C268.813 52.998 280.547 65.6104 299.399 65.6104ZM299.399 54.3604C288.984 54.3604 282.349 46.0986 282.349 32.8271V32.7393C282.349 19.4678 289.028 11.25 299.399 11.25C309.814 11.25 316.45 19.5117 316.45 32.7393V32.8271C316.45 45.9668 309.946 54.3604 299.399 54.3604Z" 153 | fill={tIsGone ? "transparent" : fill} 154 | /> 155 | <path 156 | d="M350.2 64.5117H363.472V12.041H381.841V1.09863H331.875V12.041H350.2V64.5117Z" 157 | fill={!xAndLAreGone ? fill : "transparent"} 158 | /> 159 | <path 160 | d="M389.18 64.5117H402.451V1.09863H389.18V64.5117Z" 161 | fill={!xAndLAreGone ? fill : "transparent"} 162 | /> 163 | <path 164 | d="M441.606 65.6104C460.459 65.6104 472.192 52.998 472.192 32.8271V32.7393C472.192 12.6123 460.415 0 441.606 0C422.842 0 411.021 12.5684 411.021 32.7393V32.8271C411.021 52.998 422.754 65.6104 441.606 65.6104ZM441.606 54.3604C431.191 54.3604 424.556 46.0986 424.556 32.8271V32.7393C424.556 19.4678 431.235 11.25 441.606 11.25C452.021 11.25 458.657 19.5117 458.657 32.7393V32.8271C458.657 45.9668 452.153 54.3604 441.606 54.3604Z" 165 | fill={isAreGone ? "transparent" : fill} 166 | /> 167 | <path 168 | d="M480.762 64.5117H493.989V22.9834H494.253L522.993 64.5117H534.507V1.09863H521.279V42.3193H521.016L492.363 1.09863H480.762V64.5117Z" 169 | fill={!xAndLAreGone ? fill : "transparent"} 170 | /> 171 | </g> 172 | <path 173 | id="T-reverse" 174 | d="M352.325 0H365.597V52.4707H383.966V63.4131H334V52.4707H352.325V0Z" 175 | fill={xAndLAreGone ? fill : "transparent"} 176 | /> 177 | <path 178 | id="R-reverse" 179 | d="M131.757 63.4131H118.485V40.4297H107.851L96.0293 63.4131H81L94.3594 38.4521C87.3281 35.6836 82.8896 28.7402 82.8896 20.3906V20.3027C82.8896 7.55859 91.3271 0 105.565 0H131.757V63.4131ZM118.485 30.3662V10.3711H107.191C100.644 10.3711 96.4688 14.2383 96.4688 20.3027V20.3906C96.4688 26.6309 100.424 30.3662 107.016 30.3662H118.485Z" 180 | fill={!nIsGone && !reversedEisGone ? "transparent" : fill} 181 | /> 182 | <rect 183 | id="rect" 184 | x="137" 185 | y="1" 186 | width="54" 187 | height={interpolate(frame, [7, 10], [63, 0], Extrapolate.CLAMP)} 188 | fill={nIsGone ? "black" : "transparent"} 189 | /> 190 | <circle 191 | id="circle" 192 | cx="33.5" 193 | cy="156.5" 194 | r={interpolate(frame, [7, 10], [26.5, 0], Extrapolate.CLAMP)} 195 | fill={oIsGone ? "black" : "transparent"} 196 | /> 197 | <path 198 | id="E" 199 | d="M185.012 63.4131H143V52.4707H171.74V36.5186H144.626V26.1475H171.74V10.9424H143V0H185.012V63.4131Z" 200 | fill={!eIsGone || reversedEisGone ? "transparent" : "black"} 201 | /> 202 | <g id="plus" stroke={tIsGone && !isAreGone ? "black" : "transparent"}> 203 | <line 204 | id="Line 4" 205 | x1="277" 206 | y1="31" 207 | x2="323" 208 | y2="31" 209 | stroke-width="2" 210 | /> 211 | <line id="Line 5" x1="299" y1="55" x2="299" y2="9" stroke-width="2" /> 212 | </g> 213 | <g 214 | id="plus_2" 215 | stroke={isAreGone && !rAndLAreGone ? "black" : "transparent"} 216 | > 217 | <line id="Line 4_2" x1="7" y1="31" x2="53" y2="31" stroke-width="2" /> 218 | <line id="Line 5_2" x1="29" y1="55" x2="29" y2="9" stroke-width="2" /> 219 | </g> 220 | <g id="+ L"> 221 | <path 222 | d="M533.114 43.1982H514.833V61.4795H503.627V43.1982H485.39V31.9922H503.627V13.7549H514.833V31.9922H533.114V43.1982Z" 223 | fill={xAndLAreGone && frame < 21 ? "black" : "transparent"} 224 | transform={`rotate(${interpolate( 225 | frame, 226 | [14, 20], 227 | [0, 45], 228 | Extrapolate.CLAMP 229 | )}, 509, 38)`} 230 | /> 231 | </g> 232 | <path 233 | id="L" 234 | d="M541.835 92H521.485V203H488V221.5H541.835V92Z" 235 | fill={!rAndLAreGone || lIsGone ? "transparent" : "black"} 236 | /> 237 | <path 238 | id="A" 239 | d="M424.09 221.5H451.655L472.745 92H452.395L448.695 117.715V117.345H425.57L421.87 92H403L424.09 221.5ZM446.29 134.92L437.225 198.93H436.855L427.975 134.92H446.29Z" 240 | fill={aIsGone && frame < 20 ? "black" : "transparent"} 241 | /> 242 | <rect 243 | id="rectbottom" 244 | y="253" 245 | width={interpolate(frame, [16, 20], [542, 0], Extrapolate.CLAMP)} 246 | height="102" 247 | fill={showSquares ? "black" : "transparent"} 248 | /> 249 | <rect 250 | id="rectmiddle" 251 | x="323" 252 | y="92" 253 | width="66" 254 | height="130" 255 | fill={showSquares && !XIsVisible ? "black" : "transparent"} 256 | /> 257 | </g> 258 | </svg> 259 | ); 260 | }; 261 | 262 | export default Title; 263 | --------------------------------------------------------------------------------