archiwum/j4studio-web
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #19 from gractwo/18-add-changing-logo

Browse Source 
logo spinning animation
This commit is contained in:
Adam
2023-11-19 12:52:08 +01:00
committed by GitHub
parent 6a3b01ef3e 6d32d68251
commit c5a6aa0db3
4 changed files with 77 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/layout.tsx
View File

@@ -1,23 +1,14 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import { Zilla_Slab_Highlight } from "next/font/google";
import { Zen_Tokyo_Zoo } from "next/font/google";
import "./globals.css"; import "./globals.css";
import Stars from "@/components/stars";
import Footer from "@/components/footer"; import Footer from "@/components/footer";
import { Suspense } from "react"; import { Suspense } from "react";
import Loading from "./loading"; import Loading from "./loading";
import Link from "next/link"; import Link from "next/link";
import Logo from "@/components/Logo/logo";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
const zilla_slab_highlight = Zilla_Slab_Highlight({
weight: "700",
subsets: ["latin"],
});
const zen_tokyo_zoo = Zen_Tokyo_Zoo({
weight: "400",
subsets: ["latin"],
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "Create Next App",
@@ -32,16 +23,7 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<Link href={"/"}> <Logo></Logo>
<div className="fixed text-white top-0 z-50 m-5 text-8xl flex flex-row gap-1">
<h1
className={`${zilla_slab_highlight.className} text-stachowiak-green-950`}
>
J4
</h1>
<h1 className={`${zen_tokyo_zoo.className} text-8xl`}>studio</h1>
</div>
</Link>
<Suspense fallback={<Loading />}>{children}</Suspense> <Suspense fallback={<Loading />}>{children}</Suspense>
<Footer /> <Footer />
</body> </body>

6
src/app/page.tsx
View File

@@ -19,7 +19,7 @@ export default function Home() {
"whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300" "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300"
} }
duration={2} duration={2}
delay={0.5} delay={1}
> >
{about} {about}
</FramerTextAnimate> </FramerTextAnimate>
@@ -30,7 +30,7 @@ export default function Home() {
"whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300" "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300"
} }
duration={2} duration={2}
delay={1} delay={1.5}
> >
{models} {models}
</FramerTextAnimate> </FramerTextAnimate>
@@ -41,7 +41,7 @@ export default function Home() {
"whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300" "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300"
} }
duration={2} duration={2}
delay={1.5} delay={2}
> >
{contact} {contact}
</FramerTextAnimate> </FramerTextAnimate>

49
src/components/Logo/logo.tsx Normal file
View File

@@ -0,0 +1,49 @@
"use client";
import React, { useState } from "react";
import { Zilla_Slab_Highlight } from "next/font/google";
import { Zen_Tokyo_Zoo } from "next/font/google";
import { motion } from "framer-motion";
const zilla_slab_highlight = Zilla_Slab_Highlight({
weight: "700",
subsets: ["latin"],
});
const zen_tokyo_zoo = Zen_Tokyo_Zoo({
weight: "400",
subsets: ["latin"],
});
const Logo1 = "studio";
const Logo2 = "roid";
const logo = () => {
const [logoState, setLogoState] = useState(Logo1);
function handleLogoClick() {
setLogoState((prevState) => (prevState === Logo1 ? Logo2 : Logo1));
}
return (
<div
className="fixed text-white top-0 z-50 m-5 text-8xl flex flex-row gap-1 select-none"
onClick={handleLogoClick}
>
<motion.h1
className={`${zilla_slab_highlight.className} text-stachowiak-green-950`}
>
J4
</motion.h1>
<motion.h1
key={logoState}
initial={{ scaleX: -1 }}
animate={{ scaleX: 1 }}
exit={{ scaleX: -1 }}
transition={{ type: "spring", duration: 0.5 }}
className={`${zen_tokyo_zoo.className} text-8xl`}
>
{logoState}
</motion.h1>
</div>
);
};
export default logo;

27
src/components/stars.tsx
View File

@@ -1,26 +1,28 @@
"use client"; "use client";
import { Canvas } from "@react-three/fiber"; import { OrthographicCamera, PerspectiveCamera } from "@react-three/drei";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { useEffect, useMemo, useRef, useState } from "react";
import * as THREE from "three"; import * as THREE from "three";
export default function Stars(props: any) { export default function Stars(props: any) {
let cameraPosition = 0; const [cameraPosition, setCameraPosition] = useState(0);
const meshArray: Array<{ x: number; y: number; z: number }> = []; const meshArray = useMemo(() => {
const starNumber = Math.floor(Math.random() * 300) + 200; const array: Array<{ x: number; y: number; z: number }> = [];
const starNumber = Math.floor(Math.random() * 400) + 200;
for (var i = 0; i < starNumber; i++) { for (var i = 0; i < starNumber; i++) {
meshArray.push({ array.push({
x: Math.random() * (-50 + 100) - 100, x: Math.random() * (-50 + 100) - 100,
y: Math.random() * (50 + 50) - 50, y: Math.random() * (50 + 50) - 50,
z: Math.random() * (100 + 100) - 100, z: Math.random() * (100 + 100) - 100,
}); });
} }
return array;
}, []);
// The plan is to increase the value of stars on the axis bringing them closer and once they pass the camera reset them to initial position
return ( return (
<Canvas <Canvas
onScroll={(el) => {
cameraPosition += 1;
}}
{...props} {...props}
className="bg-black ease-in-out transition duration-300" className="bg-black ease-in-out transition duration-300"
camera={{ camera={{
@@ -34,8 +36,11 @@ export default function Stars(props: any) {
<ambientLight /> <ambientLight />
{meshArray.map((el) => { {meshArray.map((el) => {
return ( return (
<mesh position={[el.x, el.y, el.z]}> <mesh position={[el.x, el.y, el.z]} key={el.x + el.y + el.z}>
<sphereGeometry args={[0.15 * Math.random()]} /> <sphereGeometry
args={[0.17 * Math.random()]}
// 0.2 / cameraPosition) * cameraPosition) / 1.6
/>
<meshPhysicalMaterial color="white" /> <meshPhysicalMaterial color="white" />
</mesh> </mesh>
); );