Animate logo (#77)

* init remotion/logo

* add remotion:logo:start script

* add assets

* init LogoComposition

* animate LogoComposition

* remove redundant files

* edit build script to build LogoComposition

* drop fps to 30

* fix duration to 30fps and rotation to 60 degrees

* create LogoFrame component from svg

* interpolate the color of frame

* add elastic effect for rotation

* add build:gif script

* add remotion:logo:build script

* render image format as png

* change logo to gif

* change logo to gif

* only check linting on src dir

* exclude dirs from vitest coverage

README.md

@@ -1,4 +1,4 @@
-<p align="center"><img src="assets/brand/logo.svg" width="256" /></p>
+<p align="center"><img src="assets/brand/logo.gif" width="256" /></p>
 
 <h1 align="center">Firereact</h1>
 

docs/index.md

@@ -1,7 +1,7 @@
 # Introduction
 
 <center>
-<img src="assets/brand/logo.svg" width="256" alt="firereact logo" />
+<img src="assets/brand/logo.gif" width="256" alt="firereact logo" />
 </center>
 
 <h1 align="center">Firereact</h1>

package.json

@@ -19,11 +19,13 @@
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "format": "prettier --write --parser typescript '**/*.{ts,tsx}'",
-    "lint": "eslint . --ext .ts,.tsx --ignore-path .gitignore --fix",
-    "lint:check": "eslint . --ext .ts,.tsx --ignore-path .gitignore",
+    "lint": "eslint src --ext .ts,.tsx --ignore-path .gitignore --fix",
+    "lint:check": "eslint src --ext .ts,.tsx --ignore-path .gitignore",
     "formatter:run": "prettier --no-error-on-unmatched-pattern --write src/**/*.ts src/**/*.tsx *.ts *.tsx",
     "formatter:check": "prettier --no-error-on-unmatched-pattern --check src/**/*.ts src/**/*.tsx *.ts *.tsx",
-    "build": "tsc --project tsconfig.build.json && vite build"
+    "build": "tsc --project tsconfig.build.json && vite build",
+    "remotion:logo:start": "cd remotion/logo && npm start",
+    "remotion:logo:build": "cd remotion/logo && npm run build:gif"
   },
   "repository": {
     "type": "git",

remotion/logo/.eslintrc

@@ -0,0 +1,6 @@
+{
+	"extends": "@remotion",
+	"env": {
+		"node": true
+	}
+}

remotion/logo/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.DS_Store
+.env
+
+# Ignore the output video from Git but not videos you import into src/.
+out

remotion/logo/.prettierrc

@@ -0,0 +1,14 @@
+{
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "jsxBracketSameLine": false,
+  "useTabs": true,
+  "overrides": [
+    {
+      "files": ["*.yml"],
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ]
+}

remotion/logo/README.md

@@ -0,0 +1,60 @@
+# Remotion video with Tailwind
+
+<p align="center">
+  <a href="https://github.com/remotion-dev/logo">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://github.com/remotion-dev/logo/raw/main/animated-logo-banner-dark.gif">
+      <img alt="Animated Remotion Logo" src="https://github.com/remotion-dev/logo/raw/main/animated-logo-banner-light.gif">
+    </picture>
+  </a>
+</p>
+
+Welcome to your Remotion project!
+
+## Commands
+
+**Install Dependencies**
+
+```console
+npm i
+```
+
+**Start Preview**
+
+```console
+npm start
+```
+
+**Render video**
+
+```console
+npm run build
+```
+
+**Upgrade Remotion**
+
+```console
+npm run upgrade
+```
+
+## Using server-side rendering
+
+This template uses a [custom Webpack override](https://www.remotion.dev/docs/webpack). If you are using server-side rendering, you need to import the override function from `./src/webpack-override.ts` and pass it to [`bundle()`](https://www.remotion.dev/docs/bundle) (if using SSR) and [`deploySite()`](https://www.remotion.dev/docs/lambda/deploysite) (if using Lambda).
+
+## Docs
+
+Get started with Remotion by reading the [fundamentals page](https://www.remotion.dev/docs/the-fundamentals).
+
+Get started with Tailwind by reading the ["Utility first" page](https://tailwindcss.com/docs/utility-first)
+
+## Help
+
+We provide help [on our Discord server](https://remotion.dev/discord).
+
+## Issues
+
+Found an issue with Remotion? [File an issue here](https://github.com/remotion-dev/remotion/issues/new).
+
+## License
+
+Note that for some entities a company license is needed. Read [the terms here](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md).