big changes
This commit is contained in:
Kismet Hasanaj
+26
-7
@@ -231,12 +231,12 @@
|
||||
6. Intro overlay
|
||||
The first-visit animated SVG wordmark. The SVG itself runs a 3-second
|
||||
stroke-then-fill animation (defined inside
|
||||
/public/branding/animated_logo_intro.svg). The overlay fades out at the
|
||||
3-second mark so the SVG completes before it disappears. Total intro
|
||||
length is matched in page.tsx's setTimeout (3600ms).
|
||||
/public/branding/animated_logo_intro.svg). The overlay begins fading once
|
||||
the wordmark finishes drawing, while the page underneath eases in. Total
|
||||
intro length is matched in page.tsx's setTimeout (3950ms).
|
||||
|
||||
When .intro-running is on the <main> element, the page content
|
||||
underneath is hidden so it doesn't flash through during the animation.
|
||||
underneath is gently softened so it can reveal itself without a hard cut.
|
||||
--------------------------------------------------------------------------- */
|
||||
.intro-overlay {
|
||||
position: fixed;
|
||||
@@ -244,13 +244,20 @@
|
||||
z-index: 2000;
|
||||
display: grid;
|
||||
place-items: center; /* dead-centre the SVG in the viewport */
|
||||
animation: intro-fade-out 600ms ease 3s forwards;
|
||||
animation: intro-fade-out 900ms cubic-bezier(0.22, 1, 0.36, 1) 3.05s forwards;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.intro-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--bg);
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 50% 32%,
|
||||
oklch(0.62 0.16 240 / 0.08),
|
||||
transparent 30%
|
||||
),
|
||||
var(--bg);
|
||||
}
|
||||
|
||||
.intro-svg {
|
||||
@@ -262,10 +269,22 @@
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.site-header,
|
||||
main > section,
|
||||
main > footer {
|
||||
transition:
|
||||
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
will-change: opacity, transform, filter;
|
||||
}
|
||||
|
||||
.intro-running .site-header,
|
||||
.intro-running main > section,
|
||||
.intro-running main > footer {
|
||||
opacity: 0;
|
||||
opacity: 0.16;
|
||||
transform: translateY(10px) scale(0.99);
|
||||
filter: blur(8px);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
+5
-4
@@ -48,7 +48,7 @@ export default function HomePage() {
|
||||
// Plays the animated logo + wordmark the first time someone visits the
|
||||
// site in this browser tab. We remember they've seen it using
|
||||
// sessionStorage so it doesn't replay on every navigation. The intro lasts
|
||||
// ~3.2 seconds, then fades out.
|
||||
// a little under 4 seconds, with a softer fade into the main page.
|
||||
// ---------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
try {
|
||||
@@ -66,10 +66,11 @@ export default function HomePage() {
|
||||
}
|
||||
|
||||
// The SVG's built-in stroke + fill animation lasts ~3s.
|
||||
// We hold for an extra ~600ms so the CSS fade-out can complete.
|
||||
// We hold a little longer so the page underneath can ease in while
|
||||
// the overlay fades away.
|
||||
const timer = window.setTimeout(() => {
|
||||
setShowIntro(false);
|
||||
}, 3600);
|
||||
}, 3950);
|
||||
|
||||
return () => window.clearTimeout(timer);
|
||||
}
|
||||
@@ -100,7 +101,7 @@ export default function HomePage() {
|
||||
A single self-contained animated SVG of the Novarix wordmark,
|
||||
drawn dead-centre in the viewport. The SVG itself contains all the
|
||||
animation (strokes draw over 2s, fill in over the next 1s — see
|
||||
/public/branding/animated_logo_intro.svg). Hidden after ~3.6s
|
||||
/public/branding/animated_logo_intro.svg). Hidden after ~4s
|
||||
(see the useEffect above + the CSS fade-out timing).
|
||||
===================================================================== */}
|
||||
{showIntro && (
|
||||
|
||||
Reference in New Issue
Block a user