diff --git a/README.md b/README.md index 23d9ee6..7449f87 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,7 @@ # tempblade Creator -tempblade creator is a motion design application, build with typescript, skia, rust using tauri. -Its currently in an early alpha stage, and there may be larger design changes to the overall structuring +tempblade creator is a motion design application, built on top of rust and skia. Its main goal is to be a flexible motion design toolkit, to be used in different environments. Right now it consists of an Editor/UI built with tauri where the ui uses react/typescript and the interpolation/timeline calculations are done in rust. It should also easily possible to run completly in the browser thanks to wasm. The project is currently in an early alpha stage, and there may be larger design changes to the overall structuring of the project. ## Why? @@ -31,6 +30,12 @@ to the frontend in javascript/typescript. This happens using tauris IPC. - Caching of skia entity instances like fonts etc. - Pretty fast (if compared to After Effects) +### Possible use cases + +- Typical motion design creation +- Data driven motion design -> craft your animation and automate the rendering/data population thanks to the soon coming typescript library +- Creation of generative art + ### Features currently w.i.p - Effects system for skias built in image filters like blurring @@ -39,5 +44,7 @@ to the frontend in javascript/typescript. This happens using tauris IPC. - Integration with OpenFX inside rust - Standalone rust rust rendering using vulkan and or metal by using rust-skia -- Standalone package for drawing (currently the logic is already decoupled from ui) -- Caching system for the rendered keyframes (currently interpolation calculation happens during playback, this could easily be cached) \ No newline at end of file +- Standalone ts package for drawing (currently the logic is already decoupled from ui) +- Standalone ts package for populating & rendering project files for enabling data driven integrations +- Caching system for the rendered keyframes (currently interpolation calculation happens during playback, this could easily be cached) +- Full pipeline automation with integrations for blender, houdini in more (Already working on this) diff --git a/web/.vscode/settings.json b/web/.vscode/settings.json index 6df4d77..26350f6 100644 --- a/web/.vscode/settings.json +++ b/web/.vscode/settings.json @@ -1,3 +1,8 @@ { - "typescript.inlayHints.parameterNames.enabled": "all" + "tailwindCSS.experimental.classRegex": [ + [ + "cva\\(([^)]*)\\)", + "[\"'`]([^\"'`]*).*?[\"'`]" + ] + ] } \ No newline at end of file diff --git a/web/README.md b/web/README.md index d1b0966..43c1d6d 100644 --- a/web/README.md +++ b/web/README.md @@ -1,14 +1,55 @@ -# tempblade Creator +# Astro Starter Kit: Basics -This is a web based motion design creator built on astro. +``` +npm create astro@latest -- --template basics +``` -## Commands +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) +[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics) +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json) + +> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! + +![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png) + + +## 🚀 Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +``` +/ +├── public/ +│ └── favicon.svg +├── src/ +│ ├── components/ +│ │ └── Card.astro +│ ├── layouts/ +│ │ └── Layout.astro +│ └── pages/ +│ └── index.astro +└── package.json +``` + +Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. + +There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. + +Any static assets, like images, can be placed in the `public/` directory. + +## 🧞 Commands All commands are run from the root of the project, from a terminal: -| Command | Action | -| :--------------------- | :----------------------------------------------- | -| `yarn dev` | Starts local dev server at `localhost:3000` | -| `yarn build` | Build your production site to `./dist/` | -| `yarn preview` | Preview your build locally, before deploying | -| `yarn astro ...` | Run CLI commands like `astro add`, `astro check` | +| Command | Action | +| :------------------------ | :----------------------------------------------- | +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:3000` | +| `npm run build` | Build your production site to `./dist/` | +| `npm run preview` | Preview your build locally, before deploying | +| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | +| `npm run astro -- --help` | Get help using the Astro CLI | + +## 👀 Want to learn more? + +Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). diff --git a/web/astro.config.mjs b/web/astro.config.mjs new file mode 100644 index 0000000..1e8d329 --- /dev/null +++ b/web/astro.config.mjs @@ -0,0 +1,12 @@ +import { defineConfig } from "astro/config"; + +import tailwind from "@astrojs/tailwind"; + +// https://astro.build/config +export default defineConfig({ + integrations: [ + tailwind({ + applyBaseStyles: false, + }), + ], +}); diff --git a/web/astro.config.ts b/web/astro.config.ts deleted file mode 100644 index 3c518bb..0000000 --- a/web/astro.config.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { defineConfig } from "astro/config"; -import UnoCSS from "unocss/astro"; - -import react from "@astrojs/react"; - -// https://astro.build/config -export default defineConfig({ - integrations: [UnoCSS({ - injectReset: true - }), react()] -}); \ No newline at end of file diff --git a/web/package.json b/web/package.json index 5c8dbdc..e5ab5d0 100644 --- a/web/package.json +++ b/web/package.json @@ -1,5 +1,5 @@ { - "name": "creator", + "name": "web", "type": "module", "version": "0.0.1", "scripts": { @@ -10,21 +10,17 @@ "astro": "astro" }, "dependencies": { - "@astrojs/react": "^2.1.1", - "@types/react": "^18.0.21", - "@types/react-dom": "^18.0.6", + "@astrojs/tailwind": "^3.1.3", "@unom/style": "^0.2.14", - "astro": "^2.3.0", - "motion": "^10.15.5", - "react": "^18.0.0", - "react-dom": "^18.0.0" - }, - "devDependencies": { - "@jasikpark/astro-svg-loader": "^0.1.0", - "@unocss/postcss": "^0.51.4", - "@unocss/preset-mini": "^0.51.4", - "@unocss/reset": "^0.51.4", - "postcss-preset-env": "^8.3.1", - "unocss": "^0.51.4" + "astro": "^2.5.0", + "autoprefixer": "^10.4.14", + "class-variance-authority": "^0.6.0", + "clsx": "^1.2.1", + "motion": "^10.16.2", + "postcss": "^8.4.24", + "postcss-custom-media": "^9.1.5", + "postcss-import": "^15.1.0", + "tailwind-merge": "^1.13.2", + "tailwindcss": "^3.0.24" } } diff --git a/web/postcss.config.cjs b/web/postcss.config.cjs index 6e2c775..228a086 100644 --- a/web/postcss.config.cjs +++ b/web/postcss.config.cjs @@ -1,10 +1,11 @@ -module.exports = { - plugins: { - "@unocss/postcss": {}, - "postcss-preset-env": { - features: { - "nesting-rules": true, - }, - }, - }, +const postcssImport = require("postcss-import"); +const nesting = require("tailwindcss/nesting"); +const tailwind = require("tailwindcss"); +const autoprefixer = require("autoprefixer"); +const customMedia = require("postcss-custom-media"); + +const config = { + plugins: [postcssImport, nesting, tailwind, autoprefixer, customMedia], }; + +module.exports = config; diff --git a/web/src/components/Button.astro b/web/src/components/Button.astro new file mode 100644 index 0000000..33f55b7 --- /dev/null +++ b/web/src/components/Button.astro @@ -0,0 +1,44 @@ +--- +import type { HTMLAttributes } from "astro/types"; +import { cva, type VariantProps } from "class-variance-authority"; +import { cn } from "@/lib/utils"; + +const button = cva( + cn( + "inline-flex items-center justify-center rounded-md text-sm font-medium", + "transition-colors focus-visible:outline-none", + "ring-main focus-visible:ring-2 focus-visible:ring-ring", + "focus-visible:ring-offset-2 disabled:opacity-50", + "disabled:pointer-events-none ring-offset-background" + ), + { + variants: { + variant: { + default: "bg-main text-neutral hocus:bg-main/80", + destructive: + "bg-error text-destructive-foreground hocus:bg-destructive/90", + outline: + "border border-input hover:bg-accent hover:text-accent-foreground", + secondary: "bg-main/10 text-main hocus:bg-main/20", + ghost: "hocus:bg-accent hocus:text-accent-foreground", + link: "underline-offset-4 hocus:underline text-primary", + }, + size: { + default: "h-10 text-base py-2 px-4", + sm: "h-9 px-3 rounded-md", + lg: "h-11 px-8 rounded-md", + }, + }, + } +); + +export interface Props + extends HTMLAttributes<"button">, + VariantProps {} + +const { variant = "default", size = "default", ...props } = Astro.props; +--- + + diff --git a/web/src/components/Card.astro b/web/src/components/Card.astro new file mode 100644 index 0000000..f3599c7 --- /dev/null +++ b/web/src/components/Card.astro @@ -0,0 +1,31 @@ +--- +import type { HTMLAttributes } from "astro/types"; +import { VariantProps, cva } from "class-variance-authority"; + +const card = cva( + "rounded-card transition-colors bg-neutral-accent ring-2 ring-main/10", + { + variants: { + interactable: { + false: "transition-shadow focus-within:shadow-lg ring-2 ring-neutral", + true: "cursor-pointer shadow-sm hocus:bg-neutral-accent/50 \ + hocus:shadow-lg hocus:ring-2 hocus:outline-none", + }, + padding: { + true: "p-card", + false: "p-0", + }, + }, + } +); + +export interface Props + extends HTMLAttributes<"div">, + VariantProps {} + +const { interactable = false, padding = true, ...props } = Astro.props; +--- + +
+ +
diff --git a/web/src/components/Cards/CardFeature.astro b/web/src/components/Cards/CardFeature.astro new file mode 100644 index 0000000..65d4033 --- /dev/null +++ b/web/src/components/Cards/CardFeature.astro @@ -0,0 +1,18 @@ +--- +import Card from "../Card.astro"; +export interface Props { + title: string; + description: string; +} + +const { title, description } = Astro.props; +--- + + +

+ {title} +

+

+ {description} +

+ diff --git a/web/src/components/Cards/Highlight.astro b/web/src/components/Cards/Highlight.astro deleted file mode 100644 index 95a34fd..0000000 --- a/web/src/components/Cards/Highlight.astro +++ /dev/null @@ -1,39 +0,0 @@ ---- -export interface Props { - title: string; - description: string; -} - -const { title, description } = Astro.props; ---- - -
-
- -
-

{title}

-

{description}

-
- - diff --git a/web/src/components/Icons/Highlights/HighlightsIcon.astro b/web/src/components/Icons/Highlights/HighlightsIcon.astro deleted file mode 100644 index c8119b7..0000000 --- a/web/src/components/Icons/Highlights/HighlightsIcon.astro +++ /dev/null @@ -1,21 +0,0 @@ ---- -import SVG from "@jasikpark/astro-svg-loader"; - -type IconName = "resolution" | "smooth" | "local"; - -export interface Props { - name: IconName; -} - -const { name } = Astro.props; - -const icons: Record> = { - resolution: import("./Icon_Resolution.svg?raw"), - smooth: import("./Icon_Smooth.svg?raw"), - local: import("./Icon_Local.svg?raw"), -}; - -const iconSrc = icons[name]; ---- - - diff --git a/web/src/components/Icons/Highlights/Icon_Local.svg b/web/src/components/Icons/Highlights/Icon_Local.svg deleted file mode 100644 index abbf1bd..0000000 --- a/web/src/components/Icons/Highlights/Icon_Local.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/components/Icons/Highlights/Icon_Resolution.svg b/web/src/components/Icons/Highlights/Icon_Resolution.svg deleted file mode 100644 index 9a4d085..0000000 --- a/web/src/components/Icons/Highlights/Icon_Resolution.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web/src/components/Icons/Highlights/Icon_Smooth.svg b/web/src/components/Icons/Highlights/Icon_Smooth.svg deleted file mode 100644 index 61161d9..0000000 --- a/web/src/components/Icons/Highlights/Icon_Smooth.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/components/Layout/Footer.astro b/web/src/components/Layout/Footer.astro index 35d48a4..5974798 100644 --- a/web/src/components/Layout/Footer.astro +++ b/web/src/components/Layout/Footer.astro @@ -1,4 +1,6 @@ --- +import Section from "../Section.astro"; + type NavigationItem = { path: string; label: string; @@ -40,31 +42,21 @@ const tree: Array = [ ]; --- -
-
- { - tree.map((group) => ( -
-

{group.title}

-
- {group.items.map((item) => ( - {item.label} - ))} +
+
+
+ { + tree.map((group) => ( +
+

{group.title}

+
+ {group.items.map((item) => ( + {item.label} + ))} +
-
- )) - } -
+ )) + } +
+
- - diff --git a/web/src/components/Layout/Header.astro b/web/src/components/Layout/Header.astro deleted file mode 100644 index 5d31ee8..0000000 --- a/web/src/components/Layout/Header.astro +++ /dev/null @@ -1,48 +0,0 @@ ---- -import Logo from "components/Logo.astro"; ---- - -
-
- - -
-
- - diff --git a/web/src/components/Logo.astro b/web/src/components/Logo.astro deleted file mode 100644 index eb5be22..0000000 --- a/web/src/components/Logo.astro +++ /dev/null @@ -1,42 +0,0 @@ - - - diff --git a/web/src/components/Section.astro b/web/src/components/Section.astro new file mode 100644 index 0000000..4c53d63 --- /dev/null +++ b/web/src/components/Section.astro @@ -0,0 +1,27 @@ +--- +import type { HTMLAttributes } from "astro/types"; +import { cva, type VariantProps } from "class-variance-authority"; + +const section = cva("relative w-full", { + variants: { + padding: { + true: "p-main", + false: "p-0", + }, + maxWidth: { + true: "max-w-section mx-auto", + false: "", + }, + }, +}); + +export interface Props + extends HTMLAttributes<"section">, + VariantProps {} + +const { padding = true, maxWidth = true, ...props } = Astro.props; +--- + +
+ +
diff --git a/web/src/layouts/Layout.astro b/web/src/layouts/Layout.astro deleted file mode 100644 index 163de7e..0000000 --- a/web/src/layouts/Layout.astro +++ /dev/null @@ -1,116 +0,0 @@ ---- -import Header from "components/Layout/Header.astro"; -import Footer from "components/Layout/Footer.astro"; - -export interface Props { - title: string; -} - -const { title } = Astro.props; ---- - - - - - - - - - tempblade Creator - {title} - - -
- -