html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdn.jsdelivr.net/npm/three@0.145/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.145/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@latest/examples/js/geometries/RoundedBoxGeometry.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&display=swap" rel="stylesheet">
</head>
<body>
<div id="loader"><h2>Loading..</h2>
<h4 id="h">💝</h4>
</div>
<div id="main">
<!-- articles here -->
<section id="love-articles">
<h2>Love Stories & Thoughts ❤️</h2>
<article class="love-article left">
<h3>💘 The Unexpected Love Letters</h3>
<p>Sometimes, love is expressed in the simplest yet most powerful way—words on paper. Love letters have connected hearts across time, whether written on old parchment or modern-day texts.</p>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
canvas{
position:fixed;
top:0;
left:0;
}
#main {
width:100vw;
color:white;
z-index:99;
position:absolute;
height:200vh;
margin:0px auto;
padding:10px 0px;
display: grid;
grid-template-rows: auto auto 1fr auto;
min-height: 100vh;
}
*{
font-family: "Merienda", serif;
font-optical-sizing: auto;
font-weight: 200;
font-style: normal;
font-size:5px;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
alert("scroll down till end to see the final effect")
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run