mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
SnapOtter
c57d284232
- FloatingTools: increase layer opacities (back 0.12, mid 0.22, front 0.35), add depth-of-field blur (1px back, 0.5px mid), radial vignette overlay, increase X oscillation amplitude from 3px to 8px - BrandGradient: add center SnapOtter logo with subtle scale pulse, scatter faint tool names at 5% opacity for texture, add radial vignette - FormatUniverse: replace buggy ghost badge duplicates with proper CSS opacity trail (3 copies at decreasing opacity: 1.0, 0.3, 0.1), increase logo pulse from 3% to 5% scale oscillation, add faint elliptical SVG orbit ring lines at 5% opacity behind each ring
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import type React from "react";
|
|
import { AbsoluteFill, useCurrentFrame } from "remotion";
|
|
import { ClipReveal } from "@/components/ClipReveal";
|
|
import { COLOR } from "@/lib/colors";
|
|
import { TEXT } from "@/lib/fonts";
|
|
|
|
export const HookScene: React.FC = () => {
|
|
const frame = useCurrentFrame();
|
|
const glowOpacity = Math.sin(frame * 0.08) * 0.03 + 0.08;
|
|
|
|
return (
|
|
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
width: 600,
|
|
height: 200,
|
|
borderRadius: "50%",
|
|
background: `radial-gradient(ellipse, ${COLOR.accent} 0%, transparent 70%)`,
|
|
opacity: glowOpacity,
|
|
filter: "blur(60px)",
|
|
}}
|
|
/>
|
|
|
|
<div style={{ textAlign: "center" }}>
|
|
<ClipReveal startFrame={10} duration={20}>
|
|
<span style={{ ...TEXT.heroHeadline }}>Your images.</span>
|
|
</ClipReveal>
|
|
<div style={{ height: 12 }} />
|
|
<ClipReveal startFrame={40} duration={20}>
|
|
<span style={{ ...TEXT.heroHeadline }}>Stay yours.</span>
|
|
</ClipReveal>
|
|
</div>
|
|
</AbsoluteFill>
|
|
);
|
|
};
|