Skip to content

Commit 0778dba

Browse files
dddeviddddevid
authored
Update index.html
1 parent 16a48bc commit 0778dba

1 file changed

Lines changed: 248 additions & 7 deletions

File tree

‎index.html‎

Lines changed: 248 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@
2424

2525
<link rel="icon" type="image/png" href="https://github.com/dddevid/Musly/blob/master/assets/Musly%20Big%202X.png?raw=true">
2626
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
27+
28+
<!-- Framer Motion via CDN -->
29+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
30+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
31+
2732
<style>
2833
* {
2934
margin: 0;
@@ -187,6 +192,16 @@
187192
align-items: center;
188193
}
189194

195+
@media (max-width: 768px) {
196+
.hero-content {
197+
grid-template-columns: 1fr;
198+
}
199+
200+
.hero-visual {
201+
display: none;
202+
}
203+
}
204+
190205
.hero-text {
191206
animation: fadeInUp 1s ease;
192207
}
@@ -726,13 +741,128 @@
726741
.reveal {
727742
opacity: 0;
728743
transform: translateY(50px);
729-
transition: all 0.8s ease;
744+
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
730745
}
731746

732747
.reveal.active {
733748
opacity: 1;
734749
transform: translateY(0);
735750
}
751+
752+
/* Stagger animation for grid items */
753+
.reveal:nth-child(1) { transition-delay: 0.1s; }
754+
.reveal:nth-child(2) { transition-delay: 0.2s; }
755+
.reveal:nth-child(3) { transition-delay: 0.3s; }
756+
.reveal:nth-child(4) { transition-delay: 0.4s; }
757+
.reveal:nth-child(5) { transition-delay: 0.5s; }
758+
.reveal:nth-child(6) { transition-delay: 0.6s; }
759+
760+
/* Smooth scroll */
761+
html {
762+
scroll-behavior: smooth;
763+
}
764+
765+
/* Enhanced animations */
766+
@keyframes slideInFromLeft {
767+
from {
768+
opacity: 0;
769+
transform: translateX(-100px);
770+
}
771+
to {
772+
opacity: 1;
773+
transform: translateX(0);
774+
}
775+
}
776+
777+
@keyframes slideInFromRight {
778+
from {
779+
opacity: 0;
780+
transform: translateX(100px);
781+
}
782+
to {
783+
opacity: 1;
784+
transform: translateX(0);
785+
}
786+
}
787+
788+
@keyframes scaleIn {
789+
from {
790+
opacity: 0;
791+
transform: scale(0.8);
792+
}
793+
to {
794+
opacity: 1;
795+
transform: scale(1);
796+
}
797+
}
798+
799+
.animate-left {
800+
animation: slideInFromLeft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
801+
}
802+
803+
.animate-right {
804+
animation: slideInFromRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
805+
}
806+
807+
.animate-scale {
808+
animation: scaleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
809+
}
810+
811+
/* Magnetic button effect */
812+
.btn-primary, .btn-secondary, .download-btn {
813+
position: relative;
814+
overflow: hidden;
815+
}
816+
817+
.btn-primary::before, .btn-secondary::before, .download-btn::before {
818+
content: '';
819+
position: absolute;
820+
top: 50%;
821+
left: 50%;
822+
width: 0;
823+
height: 0;
824+
border-radius: 50%;
825+
background: rgba(255, 255, 255, 0.2);
826+
transform: translate(-50%, -50%);
827+
transition: width 0.6s, height 0.6s;
828+
}
829+
830+
.btn-primary:hover::before, .btn-secondary:hover::before, .download-btn:hover::before {
831+
width: 300px;
832+
height: 300px;
833+
}
834+
835+
/* Card shine effect */
836+
.feature-card, .platform-card, .roadmap-card {
837+
position: relative;
838+
overflow: hidden;
839+
}
840+
841+
.feature-card::after, .platform-card::after, .roadmap-card::after {
842+
content: '';
843+
position: absolute;
844+
top: -50%;
845+
left: -50%;
846+
width: 200%;
847+
height: 200%;
848+
background: linear-gradient(
849+
45deg,
850+
transparent,
851+
rgba(255, 255, 255, 0.03),
852+
transparent
853+
);
854+
transform: rotate(45deg);
855+
transition: all 0.6s;
856+
}
857+
858+
.feature-card:hover::after, .platform-card:hover::after, .roadmap-card:hover::after {
859+
left: 100%;
860+
}
861+
862+
/* Parallax elements */
863+
.parallax {
864+
transition: transform 0.1s ease-out;
865+
}
736866
</style>
737867
</head>
738868
<body>
@@ -977,7 +1107,7 @@ <h2>Download Beta</h2>
9771107
</footer>
9781108

9791109
<script>
980-
// Navbar scroll effect
1110+
// Enhanced navbar scroll effect
9811111
window.addEventListener('scroll', () => {
9821112
const navbar = document.getElementById('navbar');
9831113
if (window.scrollY > 50) {
@@ -987,22 +1117,24 @@ <h2>Download Beta</h2>
9871117
}
9881118
});
9891119

990-
// Scroll reveal animation
1120+
// Advanced scroll reveal with stagger
9911121
const reveals = document.querySelectorAll('.reveal');
9921122

9931123
const revealOnScroll = () => {
994-
reveals.forEach(element => {
1124+
reveals.forEach((element, index) => {
9951125
const elementTop = element.getBoundingClientRect().top;
9961126
const windowHeight = window.innerHeight;
9971127

9981128
if (elementTop < windowHeight - 100) {
999-
element.classList.add('active');
1129+
setTimeout(() => {
1130+
element.classList.add('active');
1131+
}, index * 50);
10001132
}
10011133
});
10021134
};
10031135

10041136
window.addEventListener('scroll', revealOnScroll);
1005-
revealOnScroll(); // Initial check
1137+
revealOnScroll();
10061138

10071139
// Smooth scroll to download
10081140
function scrollToDownload() {
@@ -1011,14 +1143,123 @@ <h2>Download Beta</h2>
10111143
});
10121144
}
10131145

1014-
// Parallax effect for hero
1146+
// Enhanced parallax effect
10151147
window.addEventListener('scroll', () => {
10161148
const scrolled = window.pageYOffset;
10171149
const hero = document.querySelector('.hero-visual');
10181150
if (hero) {
10191151
hero.style.transform = `translateY(${scrolled * 0.3}px)`;
10201152
}
1153+
1154+
// Parallax for background
1155+
const bgGradient = document.querySelector('.bg-gradient');
1156+
if (bgGradient) {
1157+
bgGradient.style.transform = `translateY(${scrolled * 0.5}px) scale(${1 + scrolled * 0.0002})`;
1158+
}
1159+
});
1160+
1161+
// Magnetic button effect
1162+
const buttons = document.querySelectorAll('.btn-primary, .btn-secondary, .download-btn');
1163+
1164+
buttons.forEach(button => {
1165+
button.addEventListener('mousemove', (e) => {
1166+
const rect = button.getBoundingClientRect();
1167+
const x = e.clientX - rect.left;
1168+
const y = e.clientY - rect.top;
1169+
1170+
const centerX = rect.width / 2;
1171+
const centerY = rect.height / 2;
1172+
1173+
const deltaX = (x - centerX) / centerX;
1174+
const deltaY = (y - centerY) / centerY;
1175+
1176+
button.style.transform = `translate(${deltaX * 10}px, ${deltaY * 10}px) scale(1.05)`;
1177+
});
1178+
1179+
button.addEventListener('mouseleave', () => {
1180+
button.style.transform = 'translate(0, 0) scale(1)';
1181+
});
10211182
});
1183+
1184+
// Card tilt effect
1185+
const cards = document.querySelectorAll('.feature-card, .platform-card, .roadmap-card');
1186+
1187+
cards.forEach(card => {
1188+
card.addEventListener('mousemove', (e) => {
1189+
const rect = card.getBoundingClientRect();
1190+
const x = e.clientX - rect.left;
1191+
const y = e.clientY - rect.top;
1192+
1193+
const centerX = rect.width / 2;
1194+
const centerY = rect.height / 2;
1195+
1196+
const rotateX = (y - centerY) / 20;
1197+
const rotateY = (centerX - x) / 20;
1198+
1199+
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`;
1200+
});
1201+
1202+
card.addEventListener('mouseleave', () => {
1203+
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)';
1204+
});
1205+
});
1206+
1207+
// Animate logo on load
1208+
window.addEventListener('load', () => {
1209+
const logo = document.querySelector('.logo');
1210+
if (logo) {
1211+
logo.classList.add('animate-scale');
1212+
}
1213+
});
1214+
1215+
// Intersection Observer for advanced animations
1216+
const observerOptions = {
1217+
threshold: 0.1,
1218+
rootMargin: '0px 0px -100px 0px'
1219+
};
1220+
1221+
const observer = new IntersectionObserver((entries) => {
1222+
entries.forEach(entry => {
1223+
if (entry.isIntersecting) {
1224+
entry.target.style.opacity = '1';
1225+
entry.target.style.transform = 'translateY(0) scale(1)';
1226+
}
1227+
});
1228+
}, observerOptions);
1229+
1230+
// Observe all sections
1231+
document.querySelectorAll('section').forEach(section => {
1232+
observer.observe(section);
1233+
});
1234+
1235+
// Cursor trail effect (subtle)
1236+
let mouseX = 0;
1237+
let mouseY = 0;
1238+
let cursorX = 0;
1239+
let cursorY = 0;
1240+
1241+
document.addEventListener('mousemove', (e) => {
1242+
mouseX = e.clientX;
1243+
mouseY = e.clientY;
1244+
});
1245+
1246+
function animateCursor() {
1247+
const diffX = mouseX - cursorX;
1248+
const diffY = mouseY - cursorY;
1249+
1250+
cursorX += diffX * 0.1;
1251+
cursorY += diffY * 0.1;
1252+
1253+
requestAnimationFrame(animateCursor);
1254+
}
1255+
1256+
animateCursor();
1257+
1258+
// Add entrance animations
1259+
setTimeout(() => {
1260+
document.querySelector('.hero-text')?.classList.add('animate-left');
1261+
document.querySelector('.hero-visual')?.classList.add('animate-right');
1262+
}, 100);
10221263
</script>
10231264
</body>
10241265
</html>

0 commit comments

Comments
 (0)