Marc Mintel
60da9b9e1f
Some checks failed
Build & Deploy Mintel Blog / build-and-deploy (push) Failing after 2m24s
293 lines
11 KiB
TypeScript
293 lines
11 KiB
TypeScript
import React, { useMemo, useEffect, useState } from 'react';
|
|
import {
|
|
AbsoluteFill,
|
|
interpolate,
|
|
useCurrentFrame,
|
|
useVideoConfig,
|
|
Easing,
|
|
Img,
|
|
delayRender,
|
|
continueRender,
|
|
spring,
|
|
Audio,
|
|
staticFile,
|
|
} from 'remotion';
|
|
import { MouseCursor } from '../components/MouseCursor';
|
|
import { ContactForm } from '@/src/components/ContactForm';
|
|
import { BackgroundGrid } from '@/src/components/Layout';
|
|
import { initialState } from '@/src/components/ContactForm/constants';
|
|
|
|
// Brand Assets
|
|
import IconWhite from '@/src/assets/logo/Icon White Transparent.svg';
|
|
|
|
export const ContactFormShowcase: React.FC = () => {
|
|
const frame = useCurrentFrame();
|
|
const { width, height, fps } = useVideoConfig();
|
|
const [handle] = useState(() => delayRender('Initializing Deep Interaction Script'));
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== 'undefined') (window as any).isRemotion = true;
|
|
const timer = setTimeout(() => continueRender(handle), 500);
|
|
return () => clearTimeout(timer);
|
|
}, [handle]);
|
|
|
|
// ---- TIMELINE CONSTANTS (1500 Frames / 25s) ----
|
|
const T = useMemo(() => ({
|
|
ENTER: 0,
|
|
// Step 0: Type Selection
|
|
SELECT_WEBSITE: 60,
|
|
NEXT_0: 100,
|
|
|
|
// Step 1: Company Profile
|
|
COMPANY_TYPE_START: 150,
|
|
COMPANY_TYPE_END: 250,
|
|
NEXT_1: 300,
|
|
|
|
// Step 2: Presence
|
|
URL_TYPE_START: 350,
|
|
URL_TYPE_END: 450,
|
|
NEXT_2: 500,
|
|
|
|
// Step 3: Scope & Services (Multi-clicks)
|
|
SCOPE_CLICK_1: 550,
|
|
SCOPE_CLICK_2: 600,
|
|
SCOPE_CLICK_3: 650,
|
|
NEXT_3: 750,
|
|
|
|
// Step 4: Design Vibe
|
|
VIBE_SELECT: 850,
|
|
NEXT_4: 950,
|
|
|
|
// Step 5: Contact Info
|
|
NAME_TYPE_START: 1050,
|
|
NAME_TYPE_END: 1120,
|
|
EMAIL_TYPE_START: 1150,
|
|
EMAIL_TYPE_END: 1250,
|
|
MESSAGE_TYPE_START: 1280,
|
|
MESSAGE_TYPE_END: 1400,
|
|
SUBMIT: 1450,
|
|
|
|
EXIT: 1500,
|
|
}), []);
|
|
|
|
// ---- FORM STATE LOGIC ----
|
|
const formState = useMemo(() => {
|
|
const state = { ...initialState };
|
|
|
|
// Step 0: Fixed to website per request
|
|
state.projectType = 'website';
|
|
|
|
// Step 1: Company
|
|
if (frame > T.COMPANY_TYPE_START) {
|
|
const text = "Mintel Studios";
|
|
const progress = interpolate(frame, [T.COMPANY_TYPE_START, T.COMPANY_TYPE_END], [0, text.length], { extrapolateRight: 'clamp' });
|
|
state.companyName = text.substring(0, Math.round(progress));
|
|
}
|
|
|
|
// Step 2: URL
|
|
if (frame > T.URL_TYPE_START) {
|
|
const text = "mintel.me";
|
|
const progress = interpolate(frame, [T.URL_TYPE_START, T.URL_TYPE_END], [0, text.length], { extrapolateRight: 'clamp' });
|
|
state.existingWebsite = text.substring(0, Math.round(progress));
|
|
}
|
|
|
|
// Step 3: Selections
|
|
if (frame > T.SCOPE_CLICK_1) state.selectedPages = ['Home', 'About'];
|
|
if (frame > T.SCOPE_CLICK_2) state.selectedPages = ['Home', 'About', 'Services'];
|
|
if (frame > T.SCOPE_CLICK_3) state.features = ['blog_news'];
|
|
|
|
// Step 4: Design
|
|
if (frame > T.VIBE_SELECT) state.designVibe = 'tech';
|
|
|
|
// Step 5: Contact
|
|
if (frame > T.NAME_TYPE_START) {
|
|
const text = "Marc Mintel";
|
|
const progress = interpolate(frame, [T.NAME_TYPE_START, T.NAME_TYPE_END], [0, text.length], { extrapolateRight: 'clamp' });
|
|
state.name = text.substring(0, Math.round(progress));
|
|
}
|
|
if (frame > T.EMAIL_TYPE_START) {
|
|
const text = "marc@mintel.me";
|
|
const progress = interpolate(frame, [T.EMAIL_TYPE_START, T.EMAIL_TYPE_END], [0, text.length], { extrapolateRight: 'clamp' });
|
|
state.email = text.substring(0, Math.round(progress));
|
|
}
|
|
if (frame > T.MESSAGE_TYPE_START) {
|
|
const text = "Hi folks! Let's build something cinematic and smooth.";
|
|
const progress = interpolate(frame, [T.MESSAGE_TYPE_START, T.MESSAGE_TYPE_END], [0, text.length], { extrapolateRight: 'clamp' });
|
|
state.message = text.substring(0, Math.round(progress));
|
|
}
|
|
|
|
return state;
|
|
}, [frame, T]);
|
|
|
|
// ---- STEP NAVIGATION ----
|
|
const stepIndex = useMemo(() => {
|
|
if (frame < T.NEXT_0) return 0;
|
|
if (frame < T.NEXT_1) return 1;
|
|
if (frame < T.NEXT_2) return 2;
|
|
if (frame < T.NEXT_3) return 3;
|
|
if (frame < T.NEXT_4) return 6; // Mapping depends on actual component order, let's assume standard sequence
|
|
if (frame < T.SUBMIT) return 12; // Final Contact step
|
|
return 13; // Success
|
|
}, [frame, T]);
|
|
|
|
// ---- CAMERA ANCHORS ----
|
|
const anchors = useMemo(() => ({
|
|
'overview': { z: 0.85, x: 0, y: 0 },
|
|
'type': { z: 1.15, x: 250, y: 150 },
|
|
'company': { z: 1.3, x: 100, y: 50 },
|
|
'presence': { z: 1.3, x: 100, y: -50 },
|
|
'scope': { z: 1.1, x: -100, y: 0 },
|
|
'design': { z: 1.15, x: 150, y: 100 },
|
|
'contact': { z: 1.25, x: 0, y: 400 },
|
|
'success': { z: 0.9, x: 0, y: 0 },
|
|
}), []);
|
|
|
|
const activeAnchor = useMemo(() => {
|
|
if (frame < T.SELECT_WEBSITE) return anchors.overview;
|
|
if (frame < T.NEXT_0) return anchors.type;
|
|
if (frame < T.NEXT_1) return anchors.company;
|
|
if (frame < T.NEXT_2) return anchors.presence;
|
|
if (frame < T.NEXT_3) return anchors.scope;
|
|
if (frame < T.NEXT_4) return anchors.design;
|
|
if (frame < T.SUBMIT) return anchors.contact;
|
|
return anchors.success;
|
|
}, [frame, anchors, T]);
|
|
|
|
const camera = useMemo(() => {
|
|
// Continuous organic spring follow
|
|
const s = spring({
|
|
frame,
|
|
fps,
|
|
config: { stiffness: 45, damping: 20 },
|
|
});
|
|
|
|
// This is a simplified lerp since spring() is stateless per frame in remotion,
|
|
// for true chasing we'd need a custom reducer or just accept the "settle" behavior.
|
|
// Actually, we'll use interpolate for predictable transitions between keyframes.
|
|
return activeAnchor;
|
|
}, [frame, activeAnchor, fps]);
|
|
|
|
// Simple smooth camera interpolation for the actual movement
|
|
const smoothCamera = useMemo(() => {
|
|
// To avoid jumpiness when anchor switches, we could use a custom useSpring alternative,
|
|
// but for now let's just use the active anchor and let the frame-based spring handle the property drift if planned.
|
|
// Actually, let's just use Interpolation for reliability.
|
|
return activeAnchor;
|
|
}, [activeAnchor]);
|
|
|
|
// ---- MOUSE PATH ----
|
|
const mouse = useMemo(() => {
|
|
const targets = {
|
|
off: { x: width * 1.2, y: height * 1.2 },
|
|
type_website: { x: 200, y: 50 },
|
|
btn_next: { x: 450, y: 450 },
|
|
company_input: { x: 0, y: 0 },
|
|
url_input: { x: 0, y: -50 },
|
|
scope_1: { x: -300, y: -100 },
|
|
scope_2: { x: -300, y: 0 },
|
|
scope_3: { x: 0, y: 200 },
|
|
vibe_tech: { x: 250, y: 100 },
|
|
contact_name: { x: -200, y: 200 },
|
|
contact_email: { x: 200, y: 200 },
|
|
contact_msg: { x: 0, y: 400 },
|
|
btn_submit: { x: 400, y: 550 },
|
|
};
|
|
|
|
const path = [
|
|
{ f: 0, ...targets.off },
|
|
{ f: T.SELECT_WEBSITE, ...targets.type_website },
|
|
{ f: T.NEXT_0, ...targets.btn_next },
|
|
{ f: T.COMPANY_TYPE_START, ...targets.company_input },
|
|
{ f: T.NEXT_1, ...targets.btn_next },
|
|
{ f: T.URL_TYPE_START, ...targets.url_input },
|
|
{ f: T.NEXT_2, ...targets.btn_next },
|
|
{ f: T.SCOPE_CLICK_1, ...targets.scope_1 },
|
|
{ f: T.SCOPE_CLICK_2, ...targets.scope_2 },
|
|
{ f: T.SCOPE_CLICK_3, ...targets.scope_3 },
|
|
{ f: T.NEXT_3, ...targets.btn_next },
|
|
{ f: T.VIBE_SELECT, ...targets.vibe_tech },
|
|
{ f: T.NEXT_4, ...targets.btn_next },
|
|
{ f: T.NAME_TYPE_START, ...targets.contact_name },
|
|
{ f: T.EMAIL_TYPE_START, ...targets.contact_email },
|
|
{ f: T.MESSAGE_TYPE_START, ...targets.contact_msg },
|
|
{ f: T.SUBMIT, ...targets.btn_submit },
|
|
{ f: T.EXIT, ...targets.off },
|
|
];
|
|
|
|
let idx = 0;
|
|
for (let i = 0; i < path.length; i++) {
|
|
if (frame >= path[i].f) idx = i;
|
|
}
|
|
|
|
const p1 = path[idx];
|
|
const p2 = path[idx + 1] || p1;
|
|
|
|
const s = spring({
|
|
frame: frame - p1.f,
|
|
fps,
|
|
config: { stiffness: 60, damping: 25 },
|
|
});
|
|
|
|
return {
|
|
x: interpolate(s, [0, 1], [p1.x, p2.x]),
|
|
y: interpolate(s, [0, 1], [p1.y, p2.y]),
|
|
};
|
|
}, [frame, width, height, fps, T]);
|
|
|
|
const isClicking = useMemo(() => {
|
|
const clicks = [
|
|
T.SELECT_WEBSITE, T.NEXT_0, T.NEXT_1, T.NEXT_2,
|
|
T.SCOPE_CLICK_1, T.SCOPE_CLICK_2, T.SCOPE_CLICK_3, T.NEXT_3,
|
|
T.VIBE_SELECT, T.NEXT_4, T.SUBMIT
|
|
];
|
|
return clicks.some(c => frame >= c && frame < c + 8);
|
|
}, [frame, T]);
|
|
|
|
return (
|
|
<AbsoluteFill className="bg-white">
|
|
<BackgroundGrid />
|
|
|
|
<style>{`
|
|
* { transition: none !important; animation: none !important; -webkit-font-smoothing: antialiased; }
|
|
.focus-layer { transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; }
|
|
`}</style>
|
|
|
|
<div
|
|
className="absolute inset-0 flex items-center justify-center focus-layer"
|
|
style={{
|
|
transform: `translate3d(${Math.round(smoothCamera.x)}px, ${Math.round(smoothCamera.y)}px, 0) scale(${smoothCamera.z.toFixed(4)})`,
|
|
}}
|
|
>
|
|
<div style={{ transform: 'scale(0.85) translate3d(0,0,0)', width: '1200px' }} className="focus-layer">
|
|
<ContactForm initialStepIndex={stepIndex} initialState={formState} />
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: '50%', left: '50%',
|
|
transform: `translate3d(${Math.round(mouse.x)}px, ${Math.round(mouse.y)}px, 0)`,
|
|
zIndex: 1000,
|
|
marginTop: -12, marginLeft: -6,
|
|
}}
|
|
className="focus-layer"
|
|
>
|
|
<MouseCursor isClicking={isClicking} x={0} y={0} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Logo HUD */}
|
|
<div className="absolute top-28 left-28 z-50 focus-layer">
|
|
<div className="w-40 h-40 bg-black rounded-[3.5rem] flex items-center justify-center shadow-2xl">
|
|
<Img src={IconWhite} className="w-24 h-24" />
|
|
</div>
|
|
</div>
|
|
|
|
<AbsoluteFill
|
|
className="bg-white pointer-events-none"
|
|
style={{ opacity: interpolate(frame, [0, 15], [1, 0], { extrapolateRight: 'clamp' }) }}
|
|
/>
|
|
</AbsoluteFill>
|
|
);
|
|
};
|