Facere/FacereWeb
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate live changes from facere-website and add deploy configs

Browse Source 
Bring in the newer app.jsx/styles.css/facere.html that were edited
directly on the deployed copy, rename Facere.html -> facere.html to
match the nginx index, and check in the docker-compose + nginx.conf
that drives the container.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Knowit
2026-05-03 01:41:50 +08:00
parent 75aad16a26
commit 8ea175fa78
5 changed files with 182 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
app.jsx
View File

@@ -151,7 +151,7 @@ function PixelLogoStatic({ word, scale, gap, color }) {
Each puff is a chunky, low-res-feeling translucent disc that drifts up + fades. */
function SmokeLayer({ chimneys, scale = 1, intensity = 1 }) {
// Each chimney emits N puffs on staggered phases.
const PUFFS_PER = 5;
const PUFFS_PER = 3;
const puffs = [];
chimneys.forEach((ch, ci) => {
for (let p = 0; p < PUFFS_PER; p++) {
@@ -312,27 +312,29 @@ function HeroSection({ bgRef, contentRef }) {
// Smaller stacks at 71%, 80%, 85.5%.
// Image 1: assets/exterior-factory.png
const chimneys = [
{ x: 77.5, y: 51.0, size: 22, dur: 7.2, drift: -0.3 },
{ x: 80.5, y: 49.5, size: 32, dur: 8.0, drift: -0.4 },
{ x: 84.5, y: 50.4, size: 30, dur: 7.6, drift: 0.2 },
{ x: 86.5, y: 51.0, size: 22, dur: 7.0, drift: 0.3 },
{ x: 89.5, y: 49.8, size: 32, dur: 8.2, drift: -0.2 },
{ x: 92.0, y: 51.4, size: 22, dur: 7.4, drift: 0.4 },
{ x: 71.5, y: 51.0, size: 22, dur: 7.2, drift: -0.3 },
{ x: 74.5, y: 49.5, size: 32, dur: 8.0, drift: -0.4 },
{ x: 78.5, y: 50.4, size: 30, dur: 7.6, drift: 0.2 },
{ x: 80.5, y: 51.0, size: 22, dur: 7.0, drift: 0.3 },
{ x: 83.5, y: 49.8, size: 32, dur: 8.2, drift: -0.2 },
{ x: 86.0, y: 51.4, size: 22, dur: 7.4, drift: 0.4 },
];
return (
<section className="scene scene-hero" data-screen-label="01 Hero">
<div className="bg-wrap" ref={bgRef}>
{/* Image 1 — exterior factory */}
<div
className="bg-image"
style={{ backgroundImage: "url(assets/exterior-factory.png)" }}
/>
<SmokeLayer chimneys={chimneys} />
<EmberLayer
count={22}
area={{ x: 32, y: 48, w: 65, h: 8 }}
/>
<div className="image-frame">
{/* Image 1 — exterior factory */}
<div
className="bg-image"
style={{ backgroundImage: "url(assets/exterior-factory.png)" }}
/>
<SmokeLayer chimneys={chimneys} />
<EmberLayer
count={22}
area={{ x: 32, y: 48, w: 65, h: 8 }}
/>
</div>
<div className="vignette" />
<div className="haze" />
</div>
@@ -357,17 +359,19 @@ function ProductSection({ bgRef, contentRef }) {
return (
<section className="scene scene-product" data-screen-label="02 Product">
<div className="bg-wrap" ref={bgRef}>
{/* Image 2 — factory interior / assembly line */}
<div
className="bg-image"
style={{ backgroundImage: "url(assets/factory-interior.png)" }}
/>
{/* Robotic arm idle motion: anchored to where the arms sit in the image */}
<div className="arm-pivot arm-left" />
<div className="arm-pivot arm-right" />
<SparkLayer />
{/* Conveyor pulse strip */}
<div className="conveyor-pulse" />
<div className="image-frame">
{/* Image 2 — factory interior / assembly line */}
<div
className="bg-image"
style={{ backgroundImage: "url(assets/factory-interior.png)" }}
/>
{/* Robotic arm idle motion: anchored to where the arms sit in the image */}
<div className="arm-pivot arm-left" />
<div className="arm-pivot arm-right" />
<SparkLayer />
{/* Conveyor pulse strip */}
<div className="conveyor-pulse" />
</div>
<div className="vignette product-vignette" />
<div className="haze" />
</div>
@@ -409,12 +413,14 @@ function InstallSection({ bgRef, contentRef }) {
return (
<section className="scene scene-install" data-screen-label="03 Install">
<div className="bg-wrap" ref={bgRef}>
{/* Image 3 — PCB / chip */}
<div
className="bg-image"
style={{ backgroundImage: "url(assets/pcb-chip.png)" }}
/>
<ChipPulses />
<div className="image-frame">
{/* Image 3 — PCB / chip */}
<div
className="bg-image"
style={{ backgroundImage: "url(assets/pcb-chip.png)" }}
/>
<ChipPulses />
</div>
<div className="vignette" />
<div className="haze haze-deep" />
</div>