tempblade/creator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove unneeded import
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
add tempblade logo
improve styling
improve animations
This commit is contained in:
Enrico Bühler 2023-06-30 12:08:03 +02:00
parent fa3f7a8403
commit 1d9c38e94a
9 changed files with 133 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/src-tauri/src/main.rs
View File

@ -13,7 +13,6 @@ use creator_core::{
get_values_at_frame_range_from_animated_float_vec3,
},
timeline::calculate_timeline_at_curr_frame,
*,
},
fonts::fonts::{get_system_families, get_system_font, get_system_fonts},
};

3
web/src/components/Button.astro
View File

@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const button = cva(
export const button = cva(
cn(
"inline-flex items-center justify-center rounded-md text-sm font-medium",
"transition-colors focus-visible:outline-none",
@ -15,6 +15,7 @@ const button = cva(
variants: {
variant: {
default: "bg-main text-neutral hocus:bg-main/80",
primary: "bg-primary/50 text-main hocus:bg-primary/80",
destructive:
"bg-error text-destructive-foreground hocus:bg-destructive/90",
outline:

18
web/src/components/Layout/Header.astro Normal file
View File

@ -0,0 +1,18 @@
---
import Button, { button } from "../Button.astro";
import TempbladeLogo from "components/Logo/tempblade.astro";
---
<header class="fixed top-0 w-full h-16 z-50">
<div
class="flex flex-row justify-between h-full w-full max-w-section m-auto p-main"
>
<div class="w-16 h-8 flex">
<TempbladeLogo />
</div>
<a
class={button({ variant: "primary", size: "default" })}
href="https://github.com/tempblade/creator/releases">Download</a
>
</div>
</header>

43
web/src/components/Logo/tempblade.astro Normal file
View File

@ -0,0 +1,43 @@
<svg
width="100%"
height="100%"
viewBox="0 0 372 306"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:1.5;"
>
<g>
<g id="Tb">
<path
id="T"
d="M250.532,6.303L250.532,56.321L157.88,56.321L157.88,233.339L100.536,233.339L100.536,56.321L6.186,56.321L6.186,6.303L250.532,6.303Z"
style="fill:url(#_Linear2);fill-rule:nonzero;"></path>
<path
id="b"
class="stroke-main"
d="M133.511,6.303L133.511,41.339L172.011,41.339L172.171,248.131L204.414,248.131L204.414,280.374L317.268,280.374L317.268,248.131L349.511,248.131L349.511,151.4L317.268,151.4L317.268,119.156L235.046,119.156L235.046,151.4"
style="fill:none;stroke-width:30.45px;"></path>
</g>
</g>
<defs>
<linearGradient
id="_Linear2"
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(244.346,0,0,227.036,6.18639,119.821)"
><stop
offset="0"
class="text-main"
style="stop-color:currentColor;stop-opacity:1"></stop>
<stop
offset="1"
class="text-main/50"
style="stop-color:currentColor;stop-opacity:1"></stop>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

2
web/src/layouts/RootLayout.astro
View File

@ -1,5 +1,6 @@
---
import Footer from "@/components/Layout/Footer.astro";
import Header from "@/components/Layout/Header.astro";
import "@/styles/global.css";
export interface Props {
@ -24,6 +25,7 @@ const { title } = Astro.props;
<title>{title}</title>
</head>
<body>
<Header />
<slot />
<Footer />
</body>

2
web/src/sections/Features.astro
View File

@ -69,6 +69,4 @@ const features: Array<Feature> = [
);
});
}
console.log(cardsContainer);
</script>

25
web/src/sections/Introduction.astro
View File

@ -2,7 +2,7 @@
import Heading from "@/components/Heading.astro";
---
<div class="flex flex-col gap-4">
<div id="introduction-content-container" class="flex flex-col gap-4">
<Heading>
The Next Generation Motion Design Tool - Free & Open Source
</Heading>
@ -28,3 +28,26 @@ import Heading from "@/components/Heading.astro";
patreon!
</p>
</div>
<script>
import { ease } from "@unom/style";
import { animate, inView, stagger } from "motion";
const contentContainer = document.getElementById(
"introduction-content-container"
);
const children = document.querySelectorAll(
"#introduction-content-container *"
);
if (contentContainer) {
inView(contentContainer, () => {
animate(
children,
{ y: [20, 0], opacity: [0, 1] },
{ ...ease.quint(0.8).out, delay: stagger(0.1) }
);
});
}
</script>

45
web/src/sections/Landing.astro
View File

@ -1,5 +1,5 @@
---
import Button from "@/components/Button.astro";
import TempbladeLogo from "@/components/Logo/tempblade.astro";
---
<div class="h-[80vh] relative w-full overflow-x-hidden">
@ -8,29 +8,47 @@ import Button from "@/components/Button.astro";
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" class="w-[800px]" id="landing-bg"
<canvas width="1920" height="1080" class="w-[900px]" id="landing-bg"
></canvas>
</aside>
<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 dark:text-neutral text-center font-black">
tempblade Creator
<div
id="landing-content-container"
class="flex flex-col justify-center items-center gap-2 p-main dark:text-neutral"
>
<!-- <div data-animate class="w-12 h-12">
<TempbladeLogo />
</div> -->
<h1
data-animate
class="text-6xl lg:text-8xl text-center font-black text-current"
>
Creator
</h1>
<h2 class="text-center dark:text-neutral text-xl font-normal">
Rust Based Open Source Motion Design Editor & Toolkit
<h2 class="text-center text-xl font-normal max-w-xs">
<span class="inline-block" data-animate>
Rust Based Open Source</span
><br />
<span class="inline-block" data-animate>
Motion Design Editor & Toolkit</span
>
</h2>
</div>
</div>
</div>
<script>
import { animate, inView } from "motion";
import { animate, inView, stagger } from "motion";
import { ease } from "@unom/style";
const landingBgContainer = document.getElementById("landing-bg");
const children = document.querySelectorAll(
"#landing-content-container [data-animate]"
);
if (landingBgContainer) {
inView(landingBgContainer, () => {
animate(
@ -41,6 +59,17 @@ import Button from "@/components/Button.astro";
},
{ ...ease.quint(2).out }
);
animate(
children,
{ y: [50, 0], opacity: [0, 1] },
{
opacity: {
easing: "linear",
},
...ease.quint(0.8).out,
delay: stagger(0.1),
}
);
});
}
</script>

8
web/tailwind.config.cjs
View File

@ -1,3 +1,5 @@
const plugin = require("tailwindcss/plugin");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
@ -55,5 +57,9 @@ module.exports = {
},
},
},
plugins: [],
plugins: [
plugin(function ({ addVariant }) {
addVariant("hocus", ["&:hover", "&:focus"]);
}),
],
};