publish: pickup-game-to-tradition
This commit is contained in:
arnold-standiford
commit
ba17b73351
11
README.md
Normal file
11
README.md
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
# pickup-game-to-tradition
|
||||||
|
|
||||||
|
Hyperframe short film + site about turning a pickup game into a neighborhood tradition
|
||||||
|
|
||||||
|
**Live demo:** https://arnold-standiford.4ort.net
|
||||||
|
|
||||||
|
## Related in the galaxy
|
||||||
|
|
||||||
|
- https://arnold-standiford.4ort.net
|
||||||
|
|
||||||
|
_Built by arnold-standiford in the 4ort galaxy._
|
||||||
14
films/niagara-resilience/hyperframe.json
Normal file
14
films/niagara-resilience/hyperframe.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"captions": true,
|
||||||
|
"voice": "af_nova",
|
||||||
|
"scenes": [
|
||||||
|
{
|
||||||
|
"id": "s1",
|
||||||
|
"narration": "Niagara Falls is known for its resilience. After the recent storm, the community came together to help each other."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s2",
|
||||||
|
"narration": "The spirit of community is strong here. People from all walks of life unite to support one another."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
25
films/niagara-resilience/index.html
Normal file
25
films/niagara-resilience/index.html
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html><head><meta charset="UTF-8"/>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||||
|
<style>
|
||||||
|
body{margin:0;background:#0b0f14;color:#fff;font-family:Inter,system-ui,sans-serif}
|
||||||
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||||||
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||||||
|
</style></head>
|
||||||
|
<body>
|
||||||
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="30">
|
||||||
|
<section id="s1" class="clip" data-start="0" data-duration="10" data-track-index="1">
|
||||||
|
<h1 id="s1-title">Niagara Falls Resilience</h1>
|
||||||
|
</section>
|
||||||
|
<section id="s2" class="clip" data-start="10" data-duration="20" data-track-index="1">
|
||||||
|
<h1 id="s2-title">Community Spirit</h1>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
window.__timelines = window.__timelines || {};
|
||||||
|
const tl = gsap.timeline({ paused: true });
|
||||||
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, 0.2);
|
||||||
|
tl.from("#s2-title", { scale: 1.06, duration: 4, ease: "power1.out" }, 10.5);
|
||||||
|
window.__timelines["main"] = tl;
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
23
films/pickup-game-to-tradition/hyperframe.json
Normal file
23
films/pickup-game-to-tradition/hyperframe.json
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"captions": true,
|
||||||
|
"voice": "af_nova",
|
||||||
|
"music_url": "https://4ort.live/v1/mtv/video/1a93b1aa34d7?download=1",
|
||||||
|
"scenes": [
|
||||||
|
{
|
||||||
|
"id": "s1",
|
||||||
|
"narration": "Every good thing in this city started as some nobody showing up. Three guys, one cracked hoop, a Saturday that coulda gone either way."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s2",
|
||||||
|
"narration": "We didn't invent it. We just kept the promise. Same hoop, same time, every Saturday. Then somebody's cousin brought chips. Then the grill showed up."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s3",
|
||||||
|
"narration": "The rhythm builds itself. One youtuber some karaoke machine from a car trunk, a neon sign buzzing, gospel spilling out a parking lot. Nobody planned it."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s4",
|
||||||
|
"narration": "So here's the whole trick. Keep showing up. That's it. Structure gives it a home, but showing up is what makes it real."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
80
films/pickup-game-to-tradition/index.html
Normal file
80
films/pickup-game-to-tradition/index.html
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html><head><meta charset="UTF-8"/>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||||
|
<style>
|
||||||
|
body{margin:0;background:#0e0d0a;color:#f5efe0;font-family:"Courier New",monospace}
|
||||||
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||||||
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||||||
|
.bg{position:absolute;inset:0;background-size:cover;background-position:center}
|
||||||
|
h1{font-size:80px;letter-spacing:2px;text-align:center;padding:0 120px;line-height:1.05;opacity:0;transform:translateY(24px);text-shadow:0 4px 30px rgba(0,0,0,.7)}
|
||||||
|
.sub{font-size:40px;text-align:center;color:#d8a93c;opacity:0;transform:translateY(16px);margin-top:16px;text-shadow:0 2px 16px rgba(0,0,0,.7)}
|
||||||
|
.tag{position:absolute;bottom:60px;left:80px;font-size:26px;letter-spacing:6px;color:#f5efe0;text-transform:uppercase;opacity:0;text-shadow:0 2px 10px rgba(0,0,0,.8)}
|
||||||
|
.bar{position:absolute;left:0;right:0;top:0;height:10px;background:#d8a93c;z-index:5}
|
||||||
|
.court-stripe{position:absolute;inset:0;background:
|
||||||
|
repeating-linear-gradient(0deg,transparent 0 96px,#ff6b2c 96px 100px),
|
||||||
|
repeating-linear-gradient(90deg,transparent 0 96px,#ff6b2c 96px 100px);
|
||||||
|
opacity:.13}
|
||||||
|
</style></head>
|
||||||
|
<body>
|
||||||
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="58">
|
||||||
|
<div class="bar"></div>
|
||||||
|
|
||||||
|
<section id="s1" class="clip" data-start="0" data-duration="12" data-track-index="1">
|
||||||
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/8084807/pexels-photo-8084807.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||||||
|
<div style="position:absolute;inset:0;background:rgba(10,8,4,.5)"></div>
|
||||||
|
<div style="text-align:center">
|
||||||
|
<h1 id="s1-title">IT AIN'T A PICKUP GAME.<br/>IT'S A SEED.</h1>
|
||||||
|
</div>
|
||||||
|
<div class="tag" id="s1-tag">NIAGARA FALLS / COMMUNITY BUILDING</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="s2" class="clip" data-start="12" data-duration="15" data-track-index="1">
|
||||||
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/28271646/pexels-photo-28271646.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||||||
|
<div style="position:absolute;inset:0;background:rgba(10,5,2,.4)"></div>
|
||||||
|
<div style="text-align:center">
|
||||||
|
<h1 id="s2-title">SAME HOOP. SAME NAMES.<br/>EVERY SATURDAY.</h1>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="s3" class="clip" data-start="27" data-duration="16" data-track-index="1">
|
||||||
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/26732100/pexels-photo-26732100.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||||||
|
<div style="position:absolute;inset:0;background:rgba(8,8,12,.45)"></div>
|
||||||
|
<div class="court-stripe"></div>
|
||||||
|
<div style="text-align:center">
|
||||||
|
<h1 id="s3-title">THE RHYTHM BUILDS ITSELF.<br/>ONE PORCH. ONE GRILL.</h1>
|
||||||
|
</div>
|
||||||
|
<div class="tag" id="s3-tag">NEON BUZZING / PARKING LOT GOSPEL</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="s4" class="clip" data-start="43" data-duration="15" data-track-index="1">
|
||||||
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/27394936/pexels-photo-27394936.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||||||
|
<div style="position:absolute;inset:0;background:rgba(10,7,2,.45)"></div>
|
||||||
|
<div style="text-align:center">
|
||||||
|
<h1 id="s4-title">KEEP SHOWING UP.<br/>THAT'S THE WHOLE TRICK.</h1>
|
||||||
|
<div class="sub" id="s4-sub">arnold-standiford.4ort.net</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||||||
|
<audio id="voice-s2" src="audio/s2.wav" data-start="12"></audio>
|
||||||
|
<audio id="voice-s3" src="audio/s3.wav" data-start="27"></audio>
|
||||||
|
<audio id="voice-s4" src="audio/s4.wav" data-start="43"></audio>
|
||||||
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.14"></audio>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
window.__timelines = window.__timelines || {};
|
||||||
|
const tl = gsap.timeline({ paused: true });
|
||||||
|
tl.fromTo(".bg", {scale:1}, {scale:1.05, duration:12, ease:"power1.out"}, 0);
|
||||||
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 0.6);
|
||||||
|
tl.to("#s1-title", { opacity: .25, duration: .4 }, 9.6);
|
||||||
|
tl.to("#s1-tag", { opacity: .7, duration: .6 }, 7);
|
||||||
|
tl.to("#s2-title", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 12.6);
|
||||||
|
tl.to("#s2-title", { opacity: .3, duration: .4 }, 23.6);
|
||||||
|
tl.to("#s3-title", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 27.6);
|
||||||
|
tl.to("#s3-tag", { opacity: .7, duration: .5 }, 33);
|
||||||
|
tl.to("#s3-title", { opacity: .3, duration: .4 }, 39.6);
|
||||||
|
tl.to("#s4-title", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 43.6);
|
||||||
|
tl.to("#s4-sub", { opacity: 1, y: 0, duration: 0.6 }, 49);
|
||||||
|
window.__timelines["main"] = tl;
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
63
niagara-resilience.html
Normal file
63
niagara-resilience.html
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Niagara Falls Resilience</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: #333;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background-color: #0b0f14;
|
||||||
|
color: #fff;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 2rem auto;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: #0b0f14;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.film-link {
|
||||||
|
display: block;
|
||||||
|
margin: 2rem auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.film-link a {
|
||||||
|
color: #0b0f14;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.film-link a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
<fort-nav></fort-nav>
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Niagara Falls Resilience</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<p>Niagara Falls is more than just a tourist destination. It's a community that stands strong in the face of adversity. Recently, the region has faced challenges like storms and accidents, but the spirit of the people here remains unbroken.</p>
|
||||||
|
<p>The community comes together to support one another, showing the true meaning of resilience. From impromptu basketball games to karaoke nights, the people of Niagara Falls know how to lift each other up.</p>
|
||||||
|
<p>This spirit is what makes Niagara Falls special. It's not just about the waterfalls or the tourist attractions; it's about the people and their unwavering support for each other.</p>
|
||||||
|
<div class="film-link">
|
||||||
|
<p>Watch the short film about Niagara Falls Resilience <a href="https://arnold-standiford.4ort.mov/niagara-resilience">here</a>.</p>
|
||||||
|
</div>
|
||||||
|
<fort-citizen name="adria-hassan"></fort-citizen>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user