Compare commits
No commits in common. "518b819fe855b624e4890a641544e40558ef8aaf" and "a89c04e3160c6cbbc41ac016afb90b6afe607513" have entirely different histories.
518b819fe8
...
a89c04e316
24
README.md
24
README.md
@ -2,14 +2,10 @@
|
||||
|
||||
# tempblade Creator
|
||||
|
||||
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
|
||||
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
|
||||
of the project.
|
||||
|
||||
## Why?
|
||||
|
||||
Currently there isn't really an open source 2D motion design tool, and there is no tool that runs on linux, even if you're willing
|
||||
to pay monthly. You could use blender, but its really not optimized for this use case (source: i've tried).
|
||||
|
||||
## How does it work?
|
||||
|
||||
Currently rust is used for things like keyframe interpolation and overall timeline calculation which then gets passed
|
||||
@ -25,16 +21,6 @@ to the frontend in javascript/typescript. This happens using tauris IPC.
|
||||
- Fully typed
|
||||
- Multithreaded timeline/keyframe interpolation calculation using rayon
|
||||
- Runtime typesafety thanks to zod in typescript
|
||||
- Easy theming thanks to tailwindcss
|
||||
- Cross platform font discovery and loading in rust thanks to FontKit
|
||||
- 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
|
||||
|
||||
@ -44,7 +30,5 @@ 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 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)
|
||||
- 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)
|
||||
@ -1,11 +1,7 @@
|
||||
# tempblade Creator
|
||||
# Tauri + React + Typescript
|
||||
|
||||
This is the directory containing the application. It uses tauri with react/vite.
|
||||
This template should help get you started developing with Tauri, React and Typescript in Vite.
|
||||
|
||||
## Commands
|
||||
## Recommended IDE Setup
|
||||
|
||||
Start the dev server:
|
||||
```yarn tauri dev```
|
||||
|
||||
Create a production build:
|
||||
```yarn tauri build```
|
||||
- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
|
||||
|
||||
@ -15,7 +15,6 @@
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
"@radix-ui/react-menubar": "^1.0.2",
|
||||
"@radix-ui/react-popover": "^1.0.6",
|
||||
"@radix-ui/react-scroll-area": "^1.0.4",
|
||||
"@radix-ui/react-select": "^1.2.2",
|
||||
"@radix-ui/react-slider": "^1.1.1",
|
||||
"@radix-ui/react-toggle-group": "^1.0.4",
|
||||
|
||||
@ -17,7 +17,7 @@ tauri-build = { version = "1.3", features = [] }
|
||||
|
||||
uuid = { version = "1.3.3", features = ["v4", "fast-rng", "macro-diagnostics"] }
|
||||
tauri = { version = "1.3", features = ["dialog-open", "dialog-save", "shell-open"] }
|
||||
serde = { version = "1.0", features = ["derive", "rc"] }
|
||||
serde = { version = "1.0", features = ["derive"] }
|
||||
serde_json = "1.0"
|
||||
tint = "1.0.0"
|
||||
simple-easing = "1.0.1"
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
use std::{cmp::Ordering, sync::Arc};
|
||||
use std::cmp::Ordering;
|
||||
|
||||
use serde::{Deserialize, Serialize};
|
||||
|
||||
@ -12,26 +12,10 @@ use super::{
|
||||
pub struct Keyframe {
|
||||
pub value: f32,
|
||||
pub offset: f32,
|
||||
pub id: Arc<str>,
|
||||
pub id: String,
|
||||
pub interpolation: Option<InterpolationType>,
|
||||
}
|
||||
|
||||
impl Keyframe {
|
||||
pub fn new(
|
||||
value: f32,
|
||||
offset: f32,
|
||||
id: Arc<str>,
|
||||
interpolation: Option<InterpolationType>,
|
||||
) -> Self {
|
||||
Keyframe {
|
||||
value,
|
||||
offset,
|
||||
id,
|
||||
interpolation,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone)]
|
||||
pub struct RenderedKeyframe {
|
||||
pub absolute_frame: i32,
|
||||
|
||||
@ -25,19 +25,19 @@ fn interpolates_the_input() {
|
||||
let keyframes1 = Keyframes {
|
||||
values: vec![
|
||||
Keyframe {
|
||||
id: "1".into(),
|
||||
id: "1".to_string(),
|
||||
value: 0.0,
|
||||
offset: 0.0,
|
||||
interpolation: None,
|
||||
},
|
||||
Keyframe {
|
||||
id: "2".into(),
|
||||
id: "2".to_string(),
|
||||
value: 100.0,
|
||||
offset: 1.0,
|
||||
interpolation: None,
|
||||
},
|
||||
Keyframe {
|
||||
id: "3".into(),
|
||||
id: "3".to_string(),
|
||||
value: 300.0,
|
||||
offset: 3.0,
|
||||
interpolation: None,
|
||||
@ -48,13 +48,13 @@ fn interpolates_the_input() {
|
||||
let keyframes2 = Keyframes {
|
||||
values: vec![
|
||||
Keyframe {
|
||||
id: "4".into(),
|
||||
id: "4".to_string(),
|
||||
value: -100.0,
|
||||
offset: 0.0,
|
||||
interpolation: None,
|
||||
},
|
||||
Keyframe {
|
||||
id: "5".into(),
|
||||
id: "5".to_string(),
|
||||
value: 0.0,
|
||||
offset: 1.0,
|
||||
interpolation: None,
|
||||
@ -150,19 +150,19 @@ fn gets_value_at_frame() {
|
||||
let keyframes = Keyframes {
|
||||
values: vec![
|
||||
Keyframe {
|
||||
id: "1".into(),
|
||||
id: "1".to_string(),
|
||||
value: 0.0,
|
||||
offset: 0.0,
|
||||
interpolation: None,
|
||||
},
|
||||
Keyframe {
|
||||
id: "2".into(),
|
||||
id: "2".to_string(),
|
||||
value: 100.0,
|
||||
offset: 1.0,
|
||||
interpolation: None,
|
||||
},
|
||||
Keyframe {
|
||||
id: "3".into(),
|
||||
id: "3".to_string(),
|
||||
value: 300.0,
|
||||
offset: 3.0,
|
||||
interpolation: None,
|
||||
|
||||
@ -29,7 +29,7 @@ impl AnimatedFloat {
|
||||
AnimatedFloat {
|
||||
keyframes: Keyframes {
|
||||
values: vec![Keyframe {
|
||||
id: Uuid::new_v4().to_string().into(),
|
||||
id: Uuid::new_v4().to_string(),
|
||||
value: val,
|
||||
offset: 0.0,
|
||||
interpolation: None,
|
||||
|
||||
@ -70,7 +70,7 @@ fn build_bg(offset: f32, paint: Paint, size: (i32, i32)) -> AnimatedRectEntity {
|
||||
keyframes: Keyframes {
|
||||
values: vec![
|
||||
Keyframe {
|
||||
id: "1".into(),
|
||||
id: "1".to_string(),
|
||||
value: (size.0 * -1) as f32,
|
||||
offset: 0.0,
|
||||
interpolation: Some(InterpolationType::EasingFunction(
|
||||
@ -78,7 +78,7 @@ fn build_bg(offset: f32, paint: Paint, size: (i32, i32)) -> AnimatedRectEntity {
|
||||
)),
|
||||
},
|
||||
Keyframe {
|
||||
id: "2".into(),
|
||||
id: "2".to_string(),
|
||||
value: 0.0,
|
||||
offset: 5.0,
|
||||
interpolation: None,
|
||||
@ -89,7 +89,7 @@ fn build_bg(offset: f32, paint: Paint, size: (i32, i32)) -> AnimatedRectEntity {
|
||||
AnimatedFloat {
|
||||
keyframes: Keyframes {
|
||||
values: vec![Keyframe {
|
||||
id: "3".into(),
|
||||
id: "3".to_string(),
|
||||
value: 0.0,
|
||||
offset: 0.0,
|
||||
interpolation: None,
|
||||
@ -103,7 +103,7 @@ fn build_bg(offset: f32, paint: Paint, size: (i32, i32)) -> AnimatedRectEntity {
|
||||
AnimatedFloat {
|
||||
keyframes: Keyframes {
|
||||
values: vec![Keyframe {
|
||||
id: "4".into(),
|
||||
id: "4".to_string(),
|
||||
interpolation: None,
|
||||
value: size.0 as f32,
|
||||
offset: 0.0,
|
||||
@ -113,7 +113,7 @@ fn build_bg(offset: f32, paint: Paint, size: (i32, i32)) -> AnimatedRectEntity {
|
||||
AnimatedFloat {
|
||||
keyframes: Keyframes {
|
||||
values: vec![Keyframe {
|
||||
id: "5".into(),
|
||||
id: "5".to_string(),
|
||||
value: size.1 as f32,
|
||||
offset: 0.0,
|
||||
interpolation: None,
|
||||
@ -159,7 +159,7 @@ pub fn test_timeline_entities_at_frame(
|
||||
color: Color::new(0, 0, 0, 1.0),
|
||||
width: 10.0,
|
||||
}),
|
||||
font_name: "Arial".into(),
|
||||
font_name: "Arial".to_string(),
|
||||
align: TextAlign::Center,
|
||||
size: 20.0,
|
||||
};
|
||||
@ -168,7 +168,7 @@ pub fn test_timeline_entities_at_frame(
|
||||
style: PaintStyle::Fill(FillStyle {
|
||||
color: Color::new(0, 0, 0, 1.0),
|
||||
}),
|
||||
font_name: "Arial".into(),
|
||||
font_name: "Arial".to_string(),
|
||||
align: TextAlign::Center,
|
||||
size: 10.0,
|
||||
};
|
||||
@ -198,7 +198,7 @@ pub fn test_timeline_entities_at_frame(
|
||||
keyframes: Keyframes {
|
||||
values: vec![
|
||||
Keyframe {
|
||||
id: "1".into(),
|
||||
id: "1".to_string(),
|
||||
value: 0.0,
|
||||
offset: 0.0,
|
||||
interpolation: Some(InterpolationType::Spring(
|
||||
@ -210,7 +210,7 @@ pub fn test_timeline_entities_at_frame(
|
||||
)),
|
||||
},
|
||||
Keyframe {
|
||||
id: "2".into(),
|
||||
id: "2".to_string(),
|
||||
value: (size.0 / 2) as f32,
|
||||
offset: 2.0,
|
||||
interpolation: None,
|
||||
@ -221,7 +221,7 @@ pub fn test_timeline_entities_at_frame(
|
||||
AnimatedFloat {
|
||||
keyframes: Keyframes {
|
||||
values: vec![Keyframe {
|
||||
id: "3".into(),
|
||||
id: "3".to_string(),
|
||||
value: (size.1 / 2) as f32,
|
||||
offset: 0.0,
|
||||
interpolation: None,
|
||||
@ -248,7 +248,7 @@ pub fn test_timeline_entities_at_frame(
|
||||
keyframes: Keyframes {
|
||||
values: vec![
|
||||
Keyframe {
|
||||
id: "5".into(),
|
||||
id: "5".to_string(),
|
||||
value: 0.0,
|
||||
offset: 0.0,
|
||||
interpolation: Some(InterpolationType::Spring(
|
||||
@ -260,7 +260,7 @@ pub fn test_timeline_entities_at_frame(
|
||||
)),
|
||||
},
|
||||
Keyframe {
|
||||
id: "6".into(),
|
||||
id: "6".to_string(),
|
||||
|
||||
value: (size.0 / 2) as f32,
|
||||
offset: 2.0,
|
||||
@ -272,7 +272,7 @@ pub fn test_timeline_entities_at_frame(
|
||||
AnimatedFloat {
|
||||
keyframes: Keyframes {
|
||||
values: vec![Keyframe {
|
||||
id: "7".into(),
|
||||
id: "7".to_string(),
|
||||
value: ((size.1 / 2) as f32) + 80.0,
|
||||
offset: 0.0,
|
||||
interpolation: None,
|
||||
|
||||
@ -2,11 +2,10 @@ import "./App.css";
|
||||
import Timeline from "./components/Timeline";
|
||||
import Canvas from "./components/Canvas";
|
||||
import Properties, { PropertiesContainer } from "components/Properties";
|
||||
import MenuBar from "components/MenuBar";
|
||||
import ToolBar from "components/ToolBar";
|
||||
import useKeyControls from "hooks/useKeyControls";
|
||||
import { useFontsStore } from "stores/fonts.store";
|
||||
import * as ScrollArea from "@radix-ui/react-scroll-area";
|
||||
import ScrollBar from "components/ScrollArea";
|
||||
|
||||
export default function App() {
|
||||
const fontsStoreDidInit = useFontsStore((store) => store.didInit);
|
||||
@ -14,27 +13,26 @@ export default function App() {
|
||||
useKeyControls();
|
||||
|
||||
return (
|
||||
<div className="bg-neutral h-full w-full flex flex-col overflow-hidden">
|
||||
{/* <MenuBar /> */}
|
||||
<div className="bg-gray-950 h-full w-full flex flex-col overflow-hidden">
|
||||
<MenuBar />
|
||||
<div className="flex flex-row flex-[1] overflow-hidden">
|
||||
<ToolBar />
|
||||
{fontsStoreDidInit && (
|
||||
<ScrollArea.Root className="w-full">
|
||||
<ScrollArea.Viewport className="w-full h-full">
|
||||
<div className="flex w-full flex-col pl-4 gap-4 pr-4 overflow-x-hidden overflow-y-auto">
|
||||
<div className="flex w-full gap-4 flex-col lg:flex-row justify-center items-center mt-4">
|
||||
<Canvas />
|
||||
<PropertiesContainer>
|
||||
<Properties />
|
||||
</PropertiesContainer>
|
||||
</div>
|
||||
<Timeline />
|
||||
</div>
|
||||
</ScrollArea.Viewport>
|
||||
<ScrollBar />
|
||||
</ScrollArea.Root>
|
||||
<div className="flex flex-col pl-4 gap-4 pr-4 overflow-x-hidden overflow-y-auto">
|
||||
<div className="flex w-full gap-4 flex-col lg:flex-row justify-center items-center">
|
||||
<Canvas />
|
||||
<PropertiesContainer>
|
||||
<Properties />
|
||||
</PropertiesContainer>
|
||||
</div>
|
||||
<Timeline />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{
|
||||
/* */
|
||||
}
|
||||
|
||||
@ -17,8 +17,7 @@ const SelectTrigger = React.forwardRef<
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm",
|
||||
"placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -39,7 +38,7 @@ const SelectContent = React.forwardRef<
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-neutral-accent text-popover-foreground shadow-md animate-in fade-in-80",
|
||||
"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-slate-900 text-popover-foreground shadow-md animate-in fade-in-80",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -71,8 +70,7 @@ const SelectItem = React.forwardRef<
|
||||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
|
||||
"focus:bg-primary focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-indigo-800 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
import { FC, ReactNode } from "react";
|
||||
|
||||
const Panel: FC<{ title: string; children: ReactNode }> = ({
|
||||
title,
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
<h3>{title}</h3>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Panel;
|
||||
@ -36,8 +36,12 @@ export const PaintProperties: FC<PaintPropertiesProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
<fieldset>
|
||||
<label htmlFor="staggered-text-letter-font">Font</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label htmlFor="paint-style-type">PaintStyle</label>
|
||||
|
||||
<Select
|
||||
defaultValue={entity.style.type}
|
||||
onValueChange={(value) => {
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
import * as ScrollArea from "@radix-ui/react-scroll-area";
|
||||
import { FC } from "react";
|
||||
|
||||
const ScrollBar: FC<{ orientation?: "horizontal" | "vertical" }> = ({
|
||||
orientation = "vertical",
|
||||
}) => {
|
||||
return (
|
||||
<ScrollArea.Scrollbar
|
||||
className="flex select-none touch-none p-0.5 bg-neutral-accent transition-colors duration-[160ms] ease-out data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
|
||||
orientation={orientation}
|
||||
>
|
||||
<ScrollArea.Thumb className="flex-1 bg-main rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
|
||||
</ScrollArea.Scrollbar>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScrollBar;
|
||||
@ -79,14 +79,6 @@ const KeyframeIndicator: FC<{
|
||||
}}
|
||||
whileTap={{
|
||||
scale: 1.6,
|
||||
transition: {
|
||||
scale: {
|
||||
type: "spring",
|
||||
stiffness: 200,
|
||||
damping: 10,
|
||||
mass: 1,
|
||||
},
|
||||
},
|
||||
}}
|
||||
animate={{
|
||||
x: (animationData.offset + keyframe.offset) * TIMELINE_SCALE + 2,
|
||||
@ -105,8 +97,8 @@ const KeyframeIndicator: FC<{
|
||||
>
|
||||
<motion.span
|
||||
data-selected={selected}
|
||||
className="bg-secondary
|
||||
data-[selected=true]:bg-secondary
|
||||
className="bg-gray-200
|
||||
data-[selected=true]:bg-indigo-600
|
||||
h-full transition-colors"
|
||||
style={{
|
||||
width: 10,
|
||||
@ -116,7 +108,7 @@ const KeyframeIndicator: FC<{
|
||||
/>
|
||||
</motion.div>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-80 backdrop-blur-md bg-neutral/50">
|
||||
<PopoverContent className="w-80 backdrop-blur-md bg-slate-700/50">
|
||||
<KeyframePopover
|
||||
onClose={() => deselectKeyframe()}
|
||||
onUpdate={handleValueUpdate}
|
||||
|
||||
@ -21,11 +21,11 @@ const TimePicker: FC<TimePickerProps> = () => {
|
||||
step={1}
|
||||
aria-label="Current Frame"
|
||||
>
|
||||
<Slider.Track className="bg-neutral-accent relative grow rounded-full h-[3px]">
|
||||
<Slider.Range className="absolute bg-main rounded-full h-full" />
|
||||
<Slider.Track className="bg-blackA10 relative grow rounded-full h-[3px]">
|
||||
<Slider.Range className="absolute bg-white rounded-full h-full" />
|
||||
</Slider.Track>
|
||||
<Slider.Thumb
|
||||
className="transition-colors block w-4 h-4 bg-main shadow-[0_2px_10px] shadow-main/20 rounded-[10px] hover:bg-secondary focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-main"
|
||||
className="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA7 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA8"
|
||||
aria-label="Volume"
|
||||
/>
|
||||
</Slider.Root>
|
||||
|
||||
@ -45,7 +45,7 @@ const Track: FC<TrackProps> = ({ animationData, index, name, entity }) => {
|
||||
dragListener={false}
|
||||
dragControls={controls}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
className="h-6 relative flex flex-1 flex-col gap-1 select-none"
|
||||
className="min-h-8 relative flex flex-1 flex-col gap-1 select-none"
|
||||
>
|
||||
<motion.div
|
||||
layout
|
||||
@ -56,7 +56,7 @@ const Track: FC<TrackProps> = ({ animationData, index, name, entity }) => {
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onPointerDown={(e) => controls.start(e)}
|
||||
className={`h-full transition-all rounded-sm min-w-[200px] p-1 px-2 flex flex-col ${
|
||||
selectedEntity === index ? "bg-highlight" : "bg-neutral-accent"
|
||||
selectedEntity === index ? "bg-gray-800" : "bg-gray-900"
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-row">
|
||||
@ -77,18 +77,17 @@ const Track: FC<TrackProps> = ({ animationData, index, name, entity }) => {
|
||||
? deselectEntity()
|
||||
: selectEntity(index)
|
||||
}
|
||||
className="text-white-800 h-2 text-base leading-loose font-semibold select-none cursor-pointer"
|
||||
className="text-white-800 select-none cursor-pointer"
|
||||
>
|
||||
{name}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex h-full w-full flex-row relative rounded-sm bg-neutral-accent/50 select-none shrink-0">
|
||||
<div
|
||||
className="absolute top-0 h-full bg-neutral-accent"
|
||||
style={{ width: TIMELINE_SCALE * 10 }}
|
||||
/>
|
||||
<div
|
||||
style={{ width: TIMELINE_SCALE * 10 }}
|
||||
className="flex h-full flex-row relative bg-gray-900 select-none shrink-0"
|
||||
>
|
||||
{!isExpanded &&
|
||||
flattenedKeyframes.map((keyframe, index) => (
|
||||
<KeyframeIndicator
|
||||
@ -133,10 +132,10 @@ const Track: FC<TrackProps> = ({ animationData, index, name, entity }) => {
|
||||
},
|
||||
});
|
||||
}}
|
||||
className="z-10 w-4 bg-primary/80 h-full top-0 absolute rounded-md select-none cursor-w-resize"
|
||||
className="z-10 w-4 bg-slate-500 h-8 top-1 absolute rounded-md select-none cursor-w-resize"
|
||||
/>
|
||||
<motion.div
|
||||
className="z-10 w-4 bg-primary/80 h-full top-0 absolute rounded-md select-none cursor-e-resize"
|
||||
className="z-10 w-4 bg-slate-500 h-8 top-1 absolute rounded-md select-none cursor-e-resize"
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
drag="x"
|
||||
animate={{
|
||||
@ -195,7 +194,7 @@ const Track: FC<TrackProps> = ({ animationData, index, name, entity }) => {
|
||||
},
|
||||
});
|
||||
}}
|
||||
className="z-5 h-full top-0 absolute rounded-md transition-colors bg-primary/30 hover:bg-primary/50 select-none cursor-grab"
|
||||
className="z-5 h-8 top-1 absolute rounded-md transition-colors bg-gray-700 hover:bg-gray-600 select-none cursor-grab"
|
||||
></motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@ -78,10 +78,10 @@ const TrackAnimatedProperty: FC<{
|
||||
<motion.div
|
||||
transition={ease.quint(0.8).out}
|
||||
variants={{ enter: { y: 0, opacity: 1 }, from: { y: -10, opacity: 0 } }}
|
||||
className="flex flex-row bg-neutral-accent ml-2 align-center"
|
||||
className="flex flex-row bg-slate-900 ml-2 align-center"
|
||||
>
|
||||
<div className="min-w-[195px] flex flex-row justify-between px-2">
|
||||
<h4 className="text-main/70">{animatedProperty.label}</h4>
|
||||
<h4>{animatedProperty.label}</h4>
|
||||
<ToggleGroup>
|
||||
<ToggleGroupItem
|
||||
onClick={() =>
|
||||
|
||||
@ -6,8 +6,6 @@ import Timestamp from "./Timestamp";
|
||||
import { PauseIcon, PlayIcon } from "@radix-ui/react-icons";
|
||||
import { useRenderStateStore } from "stores/render-state.store";
|
||||
import Track from "./Track";
|
||||
import * as ScrollArea from "@radix-ui/react-scroll-area";
|
||||
import ScrollBar from "components/ScrollArea";
|
||||
|
||||
export type AnimationEntity = {
|
||||
offset: number;
|
||||
@ -39,34 +37,27 @@ const Timeline: FC<TimelineProps> = () => {
|
||||
</div>
|
||||
<Timestamp />
|
||||
</div>
|
||||
<ScrollArea.Root>
|
||||
<ScrollArea.Viewport className="w-full h-full">
|
||||
<div className="gap-1 w-full flex flex-col">
|
||||
<div className="z-20 flex flex-row gap-1">
|
||||
<div className="flex-shrink-0 min-w-[200px]" />
|
||||
<TimePicker />
|
||||
</div>
|
||||
<Reorder.Group
|
||||
className="gap-1 flex flex-col"
|
||||
values={entities}
|
||||
onReorder={setEntities}
|
||||
>
|
||||
{entities.map((entity, index) => (
|
||||
<Track
|
||||
entity={entity}
|
||||
key={entity.id}
|
||||
name={entity.type}
|
||||
index={index}
|
||||
animationData={entity.animation_data}
|
||||
/>
|
||||
))}
|
||||
</Reorder.Group>
|
||||
</div>
|
||||
</ScrollArea.Viewport>
|
||||
<div className="h-4 sticky bottom-0">
|
||||
<ScrollBar orientation="horizontal" />
|
||||
<div className="gap-1 w-full flex flex-col overflow-x-auto overflow-y-visible">
|
||||
<div className="z-20 flex flex-row gap-2">
|
||||
<div className="flex-shrink-0 min-w-[200px]" />
|
||||
<TimePicker />
|
||||
</div>
|
||||
</ScrollArea.Root>
|
||||
<Reorder.Group
|
||||
className="gap-1 flex flex-col"
|
||||
values={entities}
|
||||
onReorder={setEntities}
|
||||
>
|
||||
{entities.map((entity, index) => (
|
||||
<Track
|
||||
entity={entity}
|
||||
key={entity.id}
|
||||
name={entity.type}
|
||||
index={index}
|
||||
animationData={entity.animation_data}
|
||||
/>
|
||||
))}
|
||||
</Reorder.Group>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -12,9 +12,9 @@ const ToggleGroupItem: FC<{
|
||||
data-selected={selected}
|
||||
asChild
|
||||
onClick={onClick}
|
||||
className="hover:bg-primary/30 text-main data-[selected=true]:bg-primary/60
|
||||
className="hover:bg-indigo-600 text-white data-[selected=true]:bg-indigo-700
|
||||
data-[selected=true]:text-indigo-200 flex h-6 w-6
|
||||
items-center justify-center bg-neutral text-sm leading-4
|
||||
items-center justify-center bg-slate-800 text-sm leading-4
|
||||
first:rounded-l last:rounded-r focus:z-10 focus:shadow-[0_0_0_2px] focus:shadow-black
|
||||
focus:outline-none transition-colors"
|
||||
value="left"
|
||||
@ -29,7 +29,7 @@ const ToggleGroupItem: FC<{
|
||||
|
||||
const ToggleGroup: FC<{ children: ReactNode }> = ({ children }) => (
|
||||
<ToggleGroupComponents.Root
|
||||
className="inline-flex my-auto bg-neutral-accent h-fit rounded shadow-[0_2px_10px] shadow-black space-x-px"
|
||||
className="inline-flex my-auto bg-slate-800 h-fit rounded shadow-[0_2px_10px] shadow-black space-x-px"
|
||||
type="single"
|
||||
defaultValue="center"
|
||||
aria-label="Text alignment"
|
||||
|
||||
@ -25,9 +25,9 @@ const ToolBarButton: FC<{ children: ReactNode; onClick?: () => void }> = ({
|
||||
onClick={onClick}
|
||||
onMouseOver={() => !didHover && setDidHover(true)}
|
||||
asChild
|
||||
className="text-main p-[10px] bg-neutral flex-shrink-0 flex-grow-0
|
||||
className="text-white p-[10px] bg-gray-900 flex-shrink-0 flex-grow-0
|
||||
basis-auto w-[40px] h-[40px] rounded inline-flex text-[13px] leading-none
|
||||
items-center justify-center outline-none hover:bg-primary/50
|
||||
items-center justify-center outline-none hover:bg-indigo-900
|
||||
transition-colors
|
||||
focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo"
|
||||
>
|
||||
@ -52,7 +52,7 @@ const ToolBar = () => {
|
||||
return (
|
||||
<Toolbar.Root
|
||||
asChild
|
||||
className="bg-neutral-accent flex flex-col gap-1 p-1 h-full"
|
||||
className="bg-gray-800 flex flex-col gap-1 p-1 h-full"
|
||||
orientation="vertical"
|
||||
>
|
||||
<motion.div
|
||||
|
||||
@ -17,21 +17,32 @@
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
a,
|
||||
label {
|
||||
@apply dark:text-white;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-blue-600 underline;
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
@apply box-border bg-transparent shadow-main/10 hover:shadow-primary/50
|
||||
focus:ring-primary focus:ring-2 focus:ring-offset-2
|
||||
focus:shadow-primary selection:bg-secondary selection:text-black
|
||||
@apply box-border bg-gray-900 shadow-indigo-100 hover:shadow-indigo-400
|
||||
focus:shadow-indigo-600 selection:bg-indigo-400 selection:text-black
|
||||
outline-none px-3 py-2 rounded-md shadow-[0_0_0_1px];
|
||||
}
|
||||
|
||||
input {
|
||||
@apply appearance-none items-center justify-center
|
||||
w-full text-base leading-none transition-all;
|
||||
w-full text-base leading-none
|
||||
text-white transition-all;
|
||||
}
|
||||
|
||||
select {
|
||||
@ -39,39 +50,78 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-main: 0 0% 0%;
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--color-secondary: 0 0% 10%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--color-neutral: 0 0% 100%;
|
||||
--color-neutral-accent: 0 0% 90%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--color-highlight: 0 0% 0%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--color-primary: 222.2 47.4% 11.2%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 100% 50%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--ring: 215 20.2% 65.1%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-main: 0 0% 100%;
|
||||
.dark {
|
||||
--background: 224 71% 4%;
|
||||
--foreground: 213 31% 91%;
|
||||
|
||||
--color-primary: 260 80% 50%;
|
||||
--color-secondary: 260 50% 70%;
|
||||
--muted: 223 47% 11%;
|
||||
--muted-foreground: 215.4 16.3% 56.9%;
|
||||
|
||||
--color-neutral: 250 30% 8%;
|
||||
--color-neutral-accent: 250 40% 12%;
|
||||
--popover: 224 71% 4%;
|
||||
--popover-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--color-highlight: 250 20% 15%;
|
||||
}
|
||||
--card: 224 71% 4%;
|
||||
--card-foreground: 213 31% 91%;
|
||||
|
||||
--border: 216 34% 17%;
|
||||
--input: 216 34% 17%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 1.2%;
|
||||
|
||||
--secondary: 222.2 47.4% 11.2%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--accent: 216 34% 17%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 63% 31%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--ring: 216 34% 17%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-highlight;
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-neutral text-main;
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,14 +3,53 @@
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
main: "hsl(var(--color-main))",
|
||||
secondary: "hsl(var(--color-secondary))",
|
||||
neutral: "hsl(var(--color-neutral))",
|
||||
"neutral-accent": "hsl(var(--color-neutral-accent))",
|
||||
highlight: "hsl(var(--color-highlight))",
|
||||
primary: "hsl(var(--color-primary))",
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
|
||||
@ -702,22 +702,6 @@
|
||||
"@radix-ui/react-use-callback-ref" "1.0.1"
|
||||
"@radix-ui/react-use-controllable-state" "1.0.1"
|
||||
|
||||
"@radix-ui/react-scroll-area@^1.0.4":
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.4.tgz#13c36c453b2880aba57df67fb91a1d3f9b18998d"
|
||||
integrity sha512-OIClwBkwPG+FKvC4OMTRaa/3cfD069nkKFFL/TQzRzaO42Ce5ivKU9VMKgT7UU6UIkjcQqKBrDOIzWtPGw6e6w==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/number" "1.0.1"
|
||||
"@radix-ui/primitive" "1.0.1"
|
||||
"@radix-ui/react-compose-refs" "1.0.1"
|
||||
"@radix-ui/react-context" "1.0.1"
|
||||
"@radix-ui/react-direction" "1.0.1"
|
||||
"@radix-ui/react-presence" "1.0.1"
|
||||
"@radix-ui/react-primitive" "1.0.3"
|
||||
"@radix-ui/react-use-callback-ref" "1.0.1"
|
||||
"@radix-ui/react-use-layout-effect" "1.0.1"
|
||||
|
||||
"@radix-ui/react-select@^1.2.2":
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-1.2.2.tgz#caa981fa0d672cf3c1b2a5240135524e69b32181"
|
||||
|
||||
7
web/.vscode/settings.json
vendored
7
web/.vscode/settings.json
vendored
@ -1,8 +1,3 @@
|
||||
{
|
||||
"tailwindCSS.experimental.classRegex": [
|
||||
[
|
||||
"cva\\(([^)]*)\\)",
|
||||
"[\"'`]([^\"'`]*).*?[\"'`]"
|
||||
]
|
||||
]
|
||||
"typescript.inlayHints.parameterNames.enabled": "all"
|
||||
}
|
||||
@ -1,55 +1,14 @@
|
||||
# Astro Starter Kit: Basics
|
||||
# tempblade Creator
|
||||
|
||||
```
|
||||
npm create astro@latest -- --template basics
|
||||
```
|
||||
This is a web based motion design creator built on astro.
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
|
||||
|
||||
|
||||
## 🚀 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
|
||||
## Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| 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).
|
||||
| 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` |
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
import { defineConfig } from "astro/config";
|
||||
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [
|
||||
tailwind({
|
||||
applyBaseStyles: false,
|
||||
}),
|
||||
],
|
||||
});
|
||||
11
web/astro.config.ts
Normal file
11
web/astro.config.ts
Normal file
@ -0,0 +1,11 @@
|
||||
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()]
|
||||
});
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "web",
|
||||
"name": "creator",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
@ -10,17 +10,21 @@
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/tailwind": "^3.1.3",
|
||||
"@astrojs/react": "^2.1.1",
|
||||
"@types/react": "^18.0.21",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"@unom/style": "^0.2.14",
|
||||
"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"
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
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 = {
|
||||
plugins: {
|
||||
"@unocss/postcss": {},
|
||||
"postcss-preset-env": {
|
||||
features: {
|
||||
"nesting-rules": true,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
---
|
||||
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<typeof button> {}
|
||||
|
||||
const { variant = "default", size = "default", ...props } = Astro.props;
|
||||
---
|
||||
|
||||
<button {...props} class={button({ variant, size })}>
|
||||
<slot />
|
||||
</button>
|
||||
@ -1,31 +0,0 @@
|
||||
---
|
||||
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<typeof card> {}
|
||||
|
||||
const { interactable = false, padding = true, ...props } = Astro.props;
|
||||
---
|
||||
|
||||
<div {...props} class={card({ interactable, padding })}>
|
||||
<slot />
|
||||
</div>
|
||||
@ -1,18 +0,0 @@
|
||||
---
|
||||
import Card from "../Card.astro";
|
||||
export interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const { title, description } = Astro.props;
|
||||
---
|
||||
|
||||
<Card>
|
||||
<h4>
|
||||
{title}
|
||||
</h4>
|
||||
<p>
|
||||
{description}
|
||||
</p>
|
||||
</Card>
|
||||
39
web/src/components/Cards/Highlight.astro
Normal file
39
web/src/components/Cards/Highlight.astro
Normal file
@ -0,0 +1,39 @@
|
||||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const { title, description } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
<div class="icon-container mb-8">
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<h3 class="mb-2">{title}</h3>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 400px;
|
||||
|
||||
& p {
|
||||
max-width: 300px;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& .icon-container {
|
||||
& svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
21
web/src/components/Icons/Highlights/HighlightsIcon.astro
Normal file
21
web/src/components/Icons/Highlights/HighlightsIcon.astro
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
import SVG from "@jasikpark/astro-svg-loader";
|
||||
|
||||
type IconName = "resolution" | "smooth" | "local";
|
||||
|
||||
export interface Props {
|
||||
name: IconName;
|
||||
}
|
||||
|
||||
const { name } = Astro.props;
|
||||
|
||||
const icons: Record<IconName, Promise<typeof import("*.svg")>> = {
|
||||
resolution: import("./Icon_Resolution.svg?raw"),
|
||||
smooth: import("./Icon_Smooth.svg?raw"),
|
||||
local: import("./Icon_Local.svg?raw"),
|
||||
};
|
||||
|
||||
const iconSrc = icons[name];
|
||||
---
|
||||
|
||||
<SVG src={iconSrc} aria-label={name} />
|
||||
4
web/src/components/Icons/Highlights/Icon_Local.svg
Normal file
4
web/src/components/Icons/Highlights/Icon_Local.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="133" height="133" viewBox="0 0 133 133" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="66.5" cy="66.5" r="66.5" fill="#D9D9D9"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M75 64.8956L90 53V75.3636L66.5 94L43 75.3636V53L56 63.3095L56 0H75L75 64.8956Z" fill="#161616"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 307 B |
23
web/src/components/Icons/Highlights/Icon_Resolution.svg
Normal file
23
web/src/components/Icons/Highlights/Icon_Resolution.svg
Normal file
@ -0,0 +1,23 @@
|
||||
<svg width="118" height="118" viewBox="0 0 118 118" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g style="mix-blend-mode:luminosity">
|
||||
<rect x="0.00012207" y="59.0001" width="59" height="59" fill="white"/>
|
||||
<rect x="59.0001" y="6.10352e-05" width="59" height="59" fill="#2D2D2D"/>
|
||||
<rect x="59.0001" y="59.0001" width="59" height="59" fill="#737373"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:luminosity">
|
||||
<rect y="29.5" width="29.5" height="29.5" fill="white"/>
|
||||
<rect x="29.5" width="29.5" height="29.5" fill="#2D2D2D"/>
|
||||
<rect x="29.5" y="29.5" width="29.5" height="29.5" fill="#737373"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:luminosity">
|
||||
<rect y="15" width="15" height="15" fill="white"/>
|
||||
<rect x="15" width="15" height="15" fill="#2D2D2D"/>
|
||||
<rect x="15" y="15" width="15" height="15" fill="#737373"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:luminosity">
|
||||
<rect y="7.5" width="7.5" height="7.5" fill="white"/>
|
||||
<rect x="7.5" width="7.5" height="7.5" fill="#2D2D2D"/>
|
||||
<rect x="7.5" y="7.5" width="7.5" height="7.5" fill="#737373"/>
|
||||
<rect width="7.5" height="7.5" fill="#828282"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
5
web/src/components/Icons/Highlights/Icon_Smooth.svg
Normal file
5
web/src/components/Icons/Highlights/Icon_Smooth.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="133" height="133" viewBox="0 0 133 133" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<ellipse cx="66.5" cy="40" rx="39.5" ry="39" fill="#D9D9D9" fill-opacity="0.4"/>
|
||||
<ellipse cx="66.5" cy="94" rx="39.5" ry="39" fill="#D9D9D9" fill-opacity="0.58"/>
|
||||
<circle cx="67" cy="68" r="39" fill="#D9D9D9" fill-opacity="0.4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 337 B |
@ -1,6 +1,4 @@
|
||||
---
|
||||
import Section from "../Section.astro";
|
||||
|
||||
type NavigationItem = {
|
||||
path: string;
|
||||
label: string;
|
||||
@ -42,21 +40,31 @@ const tree: Array<NavigationGroup> = [
|
||||
];
|
||||
---
|
||||
|
||||
<footer class="bg-neutral-accent">
|
||||
<Section>
|
||||
<div class="flex flex-row flex-wrap gap-12">
|
||||
{
|
||||
tree.map((group) => (
|
||||
<div>
|
||||
<h3 class="mb-2">{group.title}</h3>
|
||||
<div class="flex flex-col">
|
||||
{group.items.map((item) => (
|
||||
<a href={item.path}>{item.label}</a>
|
||||
))}
|
||||
</div>
|
||||
<footer class="py-4">
|
||||
<div class="m-auto flex flex-row flex-wrap gap-12 inner-container">
|
||||
{
|
||||
tree.map((group) => (
|
||||
<div>
|
||||
<h3 class="mb-2">{group.title}</h3>
|
||||
<div class="flex flex-col">
|
||||
{group.items.map((item) => (
|
||||
<a href={item.path}>{item.label}</a>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
background-color: var(--color-neutral-accent);
|
||||
|
||||
& .inner-container {
|
||||
max-width: var(--content-max-width);
|
||||
margin: auto;
|
||||
padding: var(--padding-main);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
48
web/src/components/Layout/Header.astro
Normal file
48
web/src/components/Layout/Header.astro
Normal file
@ -0,0 +1,48 @@
|
||||
---
|
||||
import Logo from "components/Logo.astro";
|
||||
---
|
||||
|
||||
<header id="main-header">
|
||||
<div class="inner-container">
|
||||
<Logo />
|
||||
<button id="get-started-button" class="button">Get Started</button>
|
||||
</div>
|
||||
</header>
|
||||
<script>
|
||||
import { animate } from "motion";
|
||||
import { ease } from "@unom/style";
|
||||
|
||||
const getStartedButton = document.getElementById("get-started-button");
|
||||
const header = document.getElementById("main-header");
|
||||
|
||||
if (header) {
|
||||
animate(header, { opacity: [0, 1], y: ["-101%", 0] }, ease.quart(0.6).out);
|
||||
}
|
||||
|
||||
if (getStartedButton) {
|
||||
animate(
|
||||
getStartedButton,
|
||||
{ scale: [0, 1] },
|
||||
{ ...ease.quart(0.6).out, delay: 0 }
|
||||
);
|
||||
}
|
||||
</script>
|
||||
<style lang="postcss">
|
||||
header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 2rem;
|
||||
z-index: 99;
|
||||
|
||||
& .inner-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
border-radius: 100px;
|
||||
margin: auto;
|
||||
max-width: var(--content-max-width);
|
||||
padding: var(--padding-main);
|
||||
background-color: var(--color-neutral-accent);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
42
web/src/components/Logo.astro
Normal file
42
web/src/components/Logo.astro
Normal file
@ -0,0 +1,42 @@
|
||||
<a id="logo" class="block" href="/">
|
||||
<h1 class="text-4xl leading-8 font-bold">
|
||||
<span>p</span><span>l</span><span>a</span><span>y</span>
|
||||
</h1>
|
||||
</a>
|
||||
<style>
|
||||
a {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
}
|
||||
h1 {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
margin-bottom: 0.25rem;
|
||||
background-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0.4));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
width: fit-content;
|
||||
|
||||
&:hover {
|
||||
-webkit-text-stroke: 1px #eee;
|
||||
}
|
||||
|
||||
& span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import { animate, stagger } from "motion";
|
||||
import { ease } from "@unom/style";
|
||||
|
||||
const logoText = document.querySelectorAll("#logo h1")[0];
|
||||
|
||||
console.log(logoText);
|
||||
|
||||
animate(
|
||||
logoText.children as any,
|
||||
{ y: [-30, 0], opacity: [0, 1] },
|
||||
{ ...ease.quint(0.7).out, delay: stagger(0.1) }
|
||||
);
|
||||
</script>
|
||||
@ -1,27 +0,0 @@
|
||||
---
|
||||
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<typeof section> {}
|
||||
|
||||
const { padding = true, maxWidth = true, ...props } = Astro.props;
|
||||
---
|
||||
|
||||
<section {...props} class={section({ padding, maxWidth })}>
|
||||
<slot />
|
||||
</section>
|
||||
116
web/src/layouts/Layout.astro
Normal file
116
web/src/layouts/Layout.astro
Normal file
@ -0,0 +1,116 @@
|
||||
---
|
||||
import Header from "components/Layout/Header.astro";
|
||||
import Footer from "components/Layout/Footer.astro";
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>tempblade Creator - {title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<slot />
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
<style is:global>
|
||||
:root {
|
||||
--font-main: "Gilroy", system-ui, sans-serif;
|
||||
|
||||
--font-size-s: 0.8rem;
|
||||
--font-size-m: 1rem;
|
||||
--font-size-l: 1.2rem;
|
||||
--font-size-xl: 2.5rem;
|
||||
--font-size-xxl: 3rem;
|
||||
|
||||
--color-neutral: #222;
|
||||
--color-neutral-accent: #333;
|
||||
--color-main: #eee;
|
||||
|
||||
--padding-main: 24px 48px;
|
||||
|
||||
--content-max-width: 1600px;
|
||||
}
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
color: var(--color-main);
|
||||
background-color: var(--color-neutral);
|
||||
}
|
||||
code {
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
|
||||
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 800;
|
||||
font-size: var(--font-size-xxl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-l);
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-main);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
button,
|
||||
a {
|
||||
font-family: var(--font-main);
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #563795;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: 30px;
|
||||
transition: filter 0.1s linear;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.default-section {
|
||||
max-width: var(--content-max-width);
|
||||
padding: var(--padding-main);
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,26 +0,0 @@
|
||||
---
|
||||
import Footer from "@/components/Layout/Footer.astro";
|
||||
import "@/styles/global.css";
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
@ -1,6 +0,0 @@
|
||||
import clsx, { type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@ -1,43 +1,78 @@
|
||||
---
|
||||
import RootLayout from "@/layouts/RootLayout.astro";
|
||||
import Section from "@/components/Section.astro";
|
||||
import Button from "@/components/Button.astro";
|
||||
import Landing from "@/sections/Landing.astro";
|
||||
import Introduction from "@/sections/Introduction.astro";
|
||||
import Features from "@/sections/Features.astro";
|
||||
import Layout from "layouts/Layout.astro";
|
||||
import SectionHighlights from "sections/Start/Highlights.astro";
|
||||
---
|
||||
|
||||
<RootLayout title="tempblade - Creator">
|
||||
<main>
|
||||
<Section>
|
||||
<Landing />
|
||||
</Section>
|
||||
<Section>
|
||||
<Introduction />
|
||||
</Section>
|
||||
<Section>
|
||||
<Features />
|
||||
</Section>
|
||||
<Section id="test">
|
||||
<h1>Hallo!</h1>
|
||||
<h2>Wie gehts</h2>
|
||||
<h3>Wie gehts</h3>
|
||||
<h4>Wie gehts</h4>
|
||||
<h5>Wie gehts</h5>
|
||||
<p>
|
||||
cssnano is powered by PostCSS, a tool for transforming styles
|
||||
with JavaScript. Specifically, its plugin architecture allows us
|
||||
to compose cssnano out of small modules with limited
|
||||
responsibilities. It also allows you to easily insert cssnano
|
||||
into your build step, along with other processors that can lint
|
||||
your CSS for errors, or transpile future syntax.
|
||||
</p>
|
||||
<Button>Hallo</Button>
|
||||
<Button variant="secondary">Hallo</Button>
|
||||
<Button variant="ghost">Hallo</Button>
|
||||
<Button variant="destructive">Hallo</Button>
|
||||
<Button variant="outline">Hallo</Button>
|
||||
<Button variant="link">Hallo</Button>
|
||||
</Section>
|
||||
</main>
|
||||
</RootLayout>
|
||||
<Layout title="Free Intro Maker">
|
||||
<main>
|
||||
<section class="default-section" id="header">
|
||||
<div class="heading-container">
|
||||
<h1 class="my-4 font-bold">
|
||||
Motion Graphics made easy, <br /> for free!
|
||||
</h1>
|
||||
<p>
|
||||
Thats right! Create an intro, outro or other motion graphic elements
|
||||
right in your browser for free. How is this possible? Through the
|
||||
power of open source software!
|
||||
</p>
|
||||
</div>
|
||||
<div class="illustration-container">
|
||||
<svg viewBox="0 0 1000 1000">
|
||||
<circle cx="500" cy="500" r="300"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
<SectionHighlights />
|
||||
</main>
|
||||
<script>
|
||||
import { animate, stagger } from "motion";
|
||||
import { ease } from "@unom/style";
|
||||
|
||||
const headingContainer = document.querySelectorAll(
|
||||
"#header .heading-container"
|
||||
)[0];
|
||||
|
||||
console.log(headingContainer);
|
||||
|
||||
animate(
|
||||
headingContainer.children as any,
|
||||
{ y: [50, 0], opacity: [0, 1] },
|
||||
{ ...ease.quart(0.6).out, delay: stagger(0.1) }
|
||||
);
|
||||
window.sessionStorage.setItem("did_animation_run", "1");
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#header {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
& .heading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& .illustration-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
& svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@screen 2xl {
|
||||
#header {
|
||||
flex-direction: row;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Layout>
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
---
|
||||
import CardFeature from "@/components/Cards/CardFeature.astro";
|
||||
type Feature = {
|
||||
title: string;
|
||||
description: string;
|
||||
};
|
||||
|
||||
const features: Array<Feature> = [
|
||||
{
|
||||
title: "Fast",
|
||||
description:
|
||||
"Thanks to rust with multithreading and skia we're really fast!",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<div class="flex flex-row">
|
||||
{
|
||||
features.map((feature) => (
|
||||
<CardFeature
|
||||
title={feature.title}
|
||||
description={feature.description}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
@ -1,23 +0,0 @@
|
||||
<div class="flex flex-col gap-4">
|
||||
<h2>The next generation motion design tool</h2>
|
||||
<p>
|
||||
We believe tools for expressing yourself should be accessible to
|
||||
everybody. Not constrained to proprietary operating systems or monthly
|
||||
subscriptions. You should own the tools you work with.
|
||||
</p>
|
||||
<p>
|
||||
tempblade Creator aims to get a feasable alternative to current motion
|
||||
design tools, and even exceed them in certain aspects like
|
||||
extensibility. This is only possible due to our open source approach.
|
||||
Currently we are in a early alpha stage, and the program has to be seen
|
||||
as a proof of concept rather then a finished product.
|
||||
</p>
|
||||
<p>
|
||||
You're a developer, like our idea and want to help? Join our discord or
|
||||
check out the repository!
|
||||
</p>
|
||||
<p>
|
||||
You're not a developer but still want to support the work? I've got a
|
||||
patreon!
|
||||
</p>
|
||||
</div>
|
||||
@ -1,50 +0,0 @@
|
||||
---
|
||||
import Button from "@/components/Button.astro";
|
||||
---
|
||||
|
||||
<div class="h-[80vh] relative">
|
||||
<div
|
||||
class="z-0 absolute top-0 flex items-center w-full h-full justify-center object-center object-contain"
|
||||
id="landing-bg-container"
|
||||
>
|
||||
<canvas
|
||||
width="1920"
|
||||
height="1080"
|
||||
style="filter:blur(100px)"
|
||||
class="w-[800px]"
|
||||
id="landing-bg"></canvas>
|
||||
</div>
|
||||
<div
|
||||
class="z-10 relative w-full h-full flex items-center flex-col justify-center"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-center gap-2">
|
||||
<h1 class="text-5xl text-center font-black">tempblade Creator</h1>
|
||||
<h2 class="text-center text-xl font-normal">
|
||||
Rust Based Open Source Motion Design Editor & Toolkit
|
||||
</h2>
|
||||
<Button>Explore now!</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import { animate, inView } from "motion";
|
||||
import { ease } from "@unom/style";
|
||||
|
||||
const landingBgContainer = document.getElementById("landing-bg");
|
||||
|
||||
if (landingBgContainer) {
|
||||
inView(landingBgContainer, () => {
|
||||
animate(
|
||||
landingBgContainer,
|
||||
{
|
||||
scale: [0.7, 1],
|
||||
opacity: [0, 1],
|
||||
},
|
||||
{ ...ease.quint(2).out }
|
||||
);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="./bg.ts"></script>
|
||||
40
web/src/sections/Start/Highlights.astro
Normal file
40
web/src/sections/Start/Highlights.astro
Normal file
@ -0,0 +1,40 @@
|
||||
---
|
||||
import HighlightCard from "components/Cards/Highlight.astro";
|
||||
import HighlightIcon from "components/Icons/Highlights/HighlightsIcon.astro";
|
||||
---
|
||||
|
||||
<section class="default-section">
|
||||
<HighlightCard
|
||||
title="Local"
|
||||
description="Unleash the power of any machine rocking a modern browser"
|
||||
>
|
||||
<HighlightIcon slot="icon" name="local" />
|
||||
</HighlightCard>
|
||||
<HighlightCard
|
||||
title="Resolution"
|
||||
description="Experience high fidelity motion graphics like never before"
|
||||
>
|
||||
<HighlightIcon slot="icon" name="resolution" />
|
||||
</HighlightCard>
|
||||
<HighlightCard
|
||||
title="Smooth"
|
||||
description="Our Animations range from 24-60FPS"
|
||||
>
|
||||
<HighlightIcon slot="icon" name="smooth" />
|
||||
</HighlightCard>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
section {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@screen l {
|
||||
section {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,75 +0,0 @@
|
||||
interface Point {
|
||||
x: number;
|
||||
y: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface VoronoiCell {
|
||||
site: Point;
|
||||
vertices: Point[];
|
||||
}
|
||||
|
||||
function generateVoronoiPattern(
|
||||
canvas: HTMLCanvasElement,
|
||||
points: Array<Point>
|
||||
) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
if (ctx) {
|
||||
// Draw Voronoi regions
|
||||
for (let x = 0; x < canvas.width; x++) {
|
||||
for (let y = 0; y < canvas.height; y++) {
|
||||
let closestPointIndex = 0;
|
||||
let closestDistance = distance(x, y, points[0].x, points[0].y);
|
||||
|
||||
for (let i = 1; i < points.length; i++) {
|
||||
const dist = distance(x, y, points[i].x, points[i].y);
|
||||
if (dist < closestDistance) {
|
||||
closestDistance = dist;
|
||||
closestPointIndex = i;
|
||||
}
|
||||
}
|
||||
|
||||
const { x: px, y: py, color } = points[closestPointIndex];
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(x, y, 1, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function distance(x1: number, y1: number, x2: number, y2: number) {
|
||||
const dx = x2 - x1;
|
||||
const dy = y2 - y1;
|
||||
return Math.sqrt(dx * dx + dy * dy);
|
||||
}
|
||||
|
||||
// Get canvas element and generate Voronoi pattern
|
||||
const canvas = document.getElementById("landing-bg") as HTMLCanvasElement;
|
||||
generateVoronoiPattern(canvas, [
|
||||
{
|
||||
x: 200,
|
||||
y: 200,
|
||||
color: "#8AFFAD",
|
||||
},
|
||||
{
|
||||
x: 800,
|
||||
y: 500,
|
||||
color: "#326CCC",
|
||||
},
|
||||
{
|
||||
x: 1100,
|
||||
y: 300,
|
||||
color: "#95B2F5",
|
||||
},
|
||||
{
|
||||
x: 1200,
|
||||
y: 600,
|
||||
color: "#32C3E3",
|
||||
},
|
||||
{
|
||||
x: 300,
|
||||
y: 900,
|
||||
color: "purple",
|
||||
},
|
||||
]);
|
||||
@ -1,5 +0,0 @@
|
||||
@custom-media --sm-viewport screen and (min-width: 640px);
|
||||
@custom-media --md-viewport screen and (min-width: 768px);
|
||||
@custom-media --lg-viewport screen and (min-width: 1024px);
|
||||
@custom-media --xl-viewport screen and (min-width: 1280px);
|
||||
@custom-media --2xl-viewport screen and (min-width: 1536px);
|
||||
@ -1,80 +0,0 @@
|
||||
@import "./breakpoints.css";
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--color-main: 0 0% 0%;
|
||||
--color-primary: 0 0% 0%;
|
||||
--color-neutral: 0 0% 100%;
|
||||
--color-neutral-accent: 0 0% 93%;
|
||||
--color-highlight: 264 100% 50%;
|
||||
--color-success: 132 100% 78%;
|
||||
--color-error: 335 100% 62%;
|
||||
|
||||
--padding-main: 25px 25px;
|
||||
--padding-card: 1.25rem 1.25rem;
|
||||
|
||||
--spacing-main: 20px;
|
||||
|
||||
--max-width-section: 100%;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-main: 0 0% 100%;
|
||||
--color-primary: 0 0% 0%;
|
||||
--color-neutral: 264 100% 6%;
|
||||
--color-neutral-accent: 271 100% 10%;
|
||||
--color-highlight: 336 100% 60%;
|
||||
--color-success: 132 100% 78%;
|
||||
--color-error: 335 100% 62%;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
@apply bg-neutral text-main;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
code {
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-main;
|
||||
}
|
||||
|
||||
@media (--lg-viewport) {
|
||||
:root {
|
||||
--max-width-section: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (--xl-viewport) {
|
||||
:root {
|
||||
--max-width-section: 1550px;
|
||||
|
||||
--padding-main: 45px 100px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-3xl font-bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-2xl font-semibold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-xl font-medium;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-lg;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply max-w-[600px];
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||
theme: {
|
||||
extend: {
|
||||
screens: { "2xl": "1400px", "3xl": "1850px" },
|
||||
borderRadius: {
|
||||
card: "0.5rem",
|
||||
md: "0.5rem",
|
||||
},
|
||||
colors: {
|
||||
main: "hsl(var(--color-main))",
|
||||
primary: "hsl(var(--color-primary))",
|
||||
secondary: "hsl(var(--color-secondary))",
|
||||
neutral: "hsl(var(--color-neutral))",
|
||||
"neutral-accent": "hsl(var(--color-neutral-accent))",
|
||||
success: "hsl(var(--color-success))",
|
||||
error: "hsl(var(--color-error))",
|
||||
},
|
||||
transitionTimingFunction: {
|
||||
"in-sine": "cubic-bezier(0.47, 0, 0.745, 0.715)",
|
||||
"out-sine": "cubic-bezier(0.39, 0.575, 0.565, 1)",
|
||||
"in-out-sine": "cubic-bezier(0.445, 0.05, 0.55, 0.95)",
|
||||
"in-quad": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
|
||||
"out-quad": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
|
||||
"in-out-quad": "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
|
||||
"in-cubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
|
||||
"out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)",
|
||||
"in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1)",
|
||||
"in-quart": "cubic-bezier(0.895, 0.03, 0.685, 0.22)",
|
||||
"out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
|
||||
"in-out-quart": "cubic-bezier(0.77, 0, 0.175, 1)",
|
||||
"in-quint": "cubic-bezier(0.755, 0.05, 0.855, 0.06)",
|
||||
"out-quint": "cubic-bezier(0.23, 1, 0.32, 1)",
|
||||
"in-out-quint": "cubic-bezier(0.86, 0, 0.07, 1)",
|
||||
"in-expo": "cubic-bezier(0.95, 0.05, 0.795, 0.035)",
|
||||
"out-expo": "cubic-bezier(0.19, 1, 0.22, 1)",
|
||||
"in-out-expo": "cubic-bezier(1, 0, 0, 1)",
|
||||
"in-circ": "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
|
||||
"out-circ": "cubic-bezier(0.075, 0.82, 0.165, 1)",
|
||||
"in-out-circ": "cubic-bezier(0.785, 0.135, 0.15, 0.86)",
|
||||
},
|
||||
gap: {
|
||||
main: "var(--spacing-main)",
|
||||
card: "var(--gap-card)",
|
||||
},
|
||||
padding: {
|
||||
main: "var(--padding-main)",
|
||||
card: "var(--padding-card)",
|
||||
},
|
||||
|
||||
maxWidth: {
|
||||
section: "var(--max-width-section)",
|
||||
form: "var(--max-width-form)",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@ -1,11 +1,8 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./src",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
}
|
||||
"jsx": "react-jsx",
|
||||
"baseUrl": "src",
|
||||
"jsxImportSource": "react"
|
||||
}
|
||||
}
|
||||
16
web/uno.config.ts
Normal file
16
web/uno.config.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { defineConfig } from "unocss";
|
||||
import presetMini from "@unocss/preset-mini";
|
||||
|
||||
export default defineConfig({
|
||||
presets: [presetMini()],
|
||||
theme: {
|
||||
breakpoints: {
|
||||
s: "576px",
|
||||
m: "768px",
|
||||
l: "992px",
|
||||
xl: "1200px",
|
||||
"2xl": "1400px",
|
||||
"3xl": "1600px",
|
||||
},
|
||||
},
|
||||
});
|
||||
2597
web/yarn.lock
2597
web/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user