Skip to content

Commit 7b90d77

Browse files
ydanivydaniv
authored
Added a static css generate function (#23)
* Addded a static css generate function * FIxed docs, rules, and homepage to put the initial attribute on correct element * Changed impl. to move data-interact-initial to root * Fixed tests * Fixed entrance effects in homepage * Fixed homepage, demo, and removed externals from motion and interact builds * Some cleanup
1 parent 6eef698 commit 7b90d77

24 files changed

Lines changed: 1194 additions & 648 deletions

‎apps/demo/src/components/SelectorConditionDemo.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ const selectorConditionConfig: InteractConfig = {
1616
{
1717
trigger: 'viewEnter',
1818
key: 'selector-demo-container',
19-
listContainer: '.selector-demo-grid',
2019
params: {
2120
type: 'repeat',
2221
threshold: 0.5,

‎index.html‎

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,17 @@
4242
</script>
4343

4444
<style>
45+
/* Critical CSS for viewEnter entrance animations - prevents FOUC */
46+
@media (prefers-reduced-motion: no-preference) {
47+
[data-interact-initial="true"] > :first-child:not([data-motion-enter="done"]) {
48+
visibility: hidden;
49+
transform: none;
50+
translate: none;
51+
scale: none;
52+
rotate: none;
53+
}
54+
}
55+
4556
/* Essential Overrides */
4657
body {
4758
overflow-x: hidden;
@@ -120,7 +131,7 @@
120131
left: 0;
121132
width: 100%;
122133
height: 100%;
123-
pointer-events: none;
134+
/* pointer-events: none; */
124135
z-index: 0;
125136
display: flex;
126137
justify-content: center;
@@ -252,7 +263,7 @@
252263
align-items: center;
253264
border-radius: 50%;
254265
border: 1px solid rgba(255, 255, 255, 0.8);
255-
pointer-events: none;
266+
/* pointer-events: none; */
256267
position: absolute;
257268
}
258269

@@ -471,11 +482,11 @@
471482
<body class="bg-off-black text-white selection:bg-blue-300 selection:text-off-black">
472483

473484
<!-- Navigation -->
474-
<nav class="fixed top-0 w-full z-50 px-6 py-6 md:px-12 flex justify-between items-center mix-blend-difference text-white pointer-events-none">
475-
<interact-element data-interact-key="nav-logo" class="pointer-events-auto">
485+
<nav class="fixed top-0 w-full z-50 px-6 py-6 md:px-12 flex justify-between items-center mix-blend-difference text-white">
486+
<interact-element data-interact-key="nav-logo" data-interact-initial="true">
476487
<div class="text-sm font-medium tracking-wide uppercase">● Interact </div>
477488
</interact-element>
478-
<interact-element data-interact-key="nav-cta" class="pointer-events-auto">
489+
<interact-element data-interact-key="nav-cta" data-interact-initial="true">
479490
<a href="https://github.com/wix-incubator/interact" target="_blank" class="text-sm font-medium border border-transparent px-6 py-2 rounded-full bg-white text-off-black hover:bg-gray-200 transition-colors duration-300">
480491
Go to Repository ↗
481492
</a>
@@ -488,7 +499,7 @@
488499
<header class="relative min-h-screen flex flex-col justify-center px-6 md:px-12 lg:px-24 pt-20 overflow-hidden bg-off-black">
489500

490501
<!-- INTERACTIVE GRID BACKGROUND -->
491-
<interact-element data-interact-key="hero-grid" class="absolute inset-0 w-full h-full pointer-events-none z-0">
502+
<interact-element data-interact-key="hero-grid" class="absolute inset-0 w-full h-full z-0">
492503
<div id="grid-container" class="hero-grid-container">
493504
<!-- Javascript will populate this -->
494505
</div>
@@ -500,13 +511,13 @@
500511
<div class="inline-block">
501512

502513

503-
<interact-element data-interact-key="hero-line-1">
514+
<interact-element data-interact-key="hero-line-1" data-interact-initial="true">
504515
<h1 class="text-2xl md:text-3xl lg:text-6xl font-light tracking-tighter text-white mb-2 leading-[0.85]">
505516
Interact
506517
</h1>
507518
</interact-element>
508519

509-
<interact-element data-interact-key="hero-line-2">
520+
<interact-element data-interact-key="hero-line-2" data-interact-initial="true">
510521
<h1 class="text-6xl md:text-8xl lg:text-mega font-light tracking-tighter text-white leading-[0.85]"> Powers the web with motion.
511522
</h1>
512523
</interact-element>
@@ -515,7 +526,7 @@ <h1 class="text-6xl md:text-8xl lg:text-mega font-light tracking-tighter text-wh
515526
</div>
516527

517528
<div class="mt-16 md:mt-24 max-w-2xl ml-auto mr-0 md:mr-12 relative z-20">
518-
<interact-element data-interact-key="hero-subtitle">
529+
<interact-element data-interact-key="hero-subtitle" data-interact-initial="true">
519530
<div class="opacity-100 p-4 md:p-0">
520531
<p class="text-xl md:text-3xl font-light text-gray-400 leading-tight tracking-tight mb-8">
521532
Create high-performance, beautiful web animations with Interact — from simple micro-interactions to complex, scroll-driven storytelling. Designed for designers and developers alike, with a robust, production-ready API
@@ -547,7 +558,7 @@ <h1 class="text-6xl md:text-8xl lg:text-mega font-light tracking-tighter text-wh
547558

548559
<!-- COLUMN 1: TEXT -->
549560
<div class="w-full lg:w-1/2 lg:text-left text-center lg:pr-12 pointer-events-none mb-12 lg:mb-0">
550-
<interact-element data-interact-key="perf-text">
561+
<interact-element data-interact-key="perf-text" data-interact-initial="true">
551562
<h3 class="text-6xl md:text-8xl lg:text-giant font-light tracking-tighter text-white leading-[0.85] lg:text-left">
552563
Unleash high performance web motion
553564
</h3>
@@ -584,7 +595,7 @@ <h3 class="text-6xl md:text-8xl lg:text-giant font-light tracking-tighter text-w
584595
<!-- COLUMN 1: TEXT -->
585596
<!-- Kept lg:pl-12 from previous edit -->
586597
<div class="w-full lg:w-1/2 lg:text-left text-center lg:pl-12 pointer-events-none mb-12 lg:mb-0">
587-
<interact-element data-interact-key="perf-text-2">
598+
<interact-element data-interact-key="perf-text-2" data-interact-initial="true">
588599
<h3 class="text-6xl md:text-8xl lg:text-giant font-light tracking-tighter text-white leading-[0.85] lg:text-left">
589600
Motion That Fits Every Screen
590601
</h3>
@@ -809,22 +820,22 @@ <h1 class="text-xl md:text-3xl font-light text-gray-600 leading-tight tracking-t
809820
<div class="h-full aspect-square bg-[#000] relative overflow-hidden rounded-2xl">
810821

811822
<!-- Top Circle -->
812-
<interact-element data-interact-key="circle-top" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
823+
<interact-element data-interact-key="circle-top" data-interact-initial="true" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
813824
<div class="circle"><div class="fill-circle bg-transparent"></div></div>
814825
</interact-element>
815826

816827
<!-- Right Circle -->
817-
<interact-element data-interact-key="circle-right" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
828+
<interact-element data-interact-key="circle-right" data-interact-initial="true" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
818829
<div class="circle"><div class="fill-circle bg-transparent"></div></div>
819830
</interact-element>
820831

821832
<!-- Bottom Circle -->
822-
<interact-element data-interact-key="circle-bottom" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30">
833+
<interact-element data-interact-key="circle-bottom" data-interact-initial="true" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30">
823834
<div class="circle"><div class="fill-circle bg-transparent"></div></div>
824835
</interact-element>
825836

826837
<!-- Left Circle -->
827-
<interact-element data-interact-key="circle-left" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-40">
838+
<interact-element data-interact-key="circle-left" data-interact-initial="true" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-40">
828839
<div class="circle"><div class="fill-circle bg-transparent"></div></div>
829840
</interact-element>
830841

@@ -967,7 +978,7 @@ <h1 class="text-xl md:text-3xl font-light text-gray-600 leading-tight tracking-t
967978
<div class="max-w-7xl mx-auto">
968979

969980
<!-- Title & Description -->
970-
<interact-element data-interact-key="tailored-header">
981+
<interact-element data-interact-key="tailored-header" data-interact-initial="true">
971982
<div class="mb-24 text-center max-w-4xl mx-auto">
972983
<h2 class="text-6xl md:text-6xl lg:text-6xl font-light tracking-tighter text-white text-center leading-[1.85]">Effects. Tailored to Your Vision</h2>
973984
<p><br></p>
@@ -981,7 +992,7 @@ <h2 class="text-6xl md:text-6xl lg:text-6xl font-light tracking-tighter text-whi
981992
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 lg:gap-16 text-left">
982993

983994
<!-- Column 1 -->
984-
<interact-element data-interact-key="tailored-col-1">
995+
<interact-element data-interact-key="tailored-col-1" data-interact-initial="true">
985996
<div>
986997
<h3 class="text-xl md:text-3xl font-light text-white leading-tight tracking-tight text-center">Named Effects <span class="block text-gray-300 text-lg mt-1 font-normal">(Built-In Library)</span></h3>
987998
<p class="text-gray-400 font-light leading-tight text-center">
@@ -991,7 +1002,7 @@ <h3 class="text-xl md:text-3xl font-light text-white leading-tight tracking-tigh
9911002
</interact-element>
9921003

9931004
<!-- Column 2 -->
994-
<interact-element data-interact-key="tailored-col-2">
1005+
<interact-element data-interact-key="tailored-col-2" data-interact-initial="true">
9951006
<div>
9961007
<h3 class="text-xl md:text-3xl font-light text-white leading-tight tracking-tight text-center">Custom Keyframes</h3>
9971008
<p> <br> </p>
@@ -1002,7 +1013,7 @@ <h3 class="text-xl md:text-3xl font-light text-white leading-tight tracking-tigh
10021013
</interact-element>
10031014

10041015
<!-- Column 3 -->
1005-
<interact-element data-interact-key="tailored-col-3">
1016+
<interact-element data-interact-key="tailored-col-3" data-interact-initial="true">
10061017
<div>
10071018
<h3 class="text-xl md:text-3xl font-light text-white leading-tight tracking-tight text-center">Custom Effects <span class="block text-gray-300 text-lg mt-1 font-normal">(Full Extensibility)</span></h3>
10081019
<p class="text-gray-400 font-light leading-tight text-center">
@@ -1146,12 +1157,12 @@ <h3 class="text-2xl font-medium mb-1">Electronics Store</h3>
11461157

11471158
<!-- FOOTER -->
11481159
<footer class="bg-off-black text-white py-12 px-6 md:px-12 border-t border-gray-800 flex justify-between items-end">
1149-
<interact-element data-interact-key="footer-brand">
1160+
<interact-element data-interact-key="footer-brand" data-interact-initial="true">
11501161
<h2 class="text-lg font-medium uppercase">● Interact</h2>
11511162
<p class="text-sm text-gray-400 mt-2">© 2025</p>
11521163
</interact-element>
11531164

1154-
<interact-element data-interact-key="footer-link">
1165+
<interact-element data-interact-key="footer-link" data-interact-initial="true">
11551166
<div class="flex gap-6">
11561167
<a href="https://www.npmjs.com/package/@wix/interact" target="_blank" class="text-lg font-light hover:text-gray-500 transition-colors">NPM</a>
11571168
<a href="https://github.com/wix-incubator/interact" target="_blank" class="text-lg font-light hover:text-gray-500 transition-colors">Github</a>
@@ -1362,8 +1373,7 @@ <h3 class="font-bold text-lg">Source Code</h3>
13621373
{ transform: 'rotateY(0deg)' },
13631374
{ transform: 'rotateY(360deg)' }
13641375
]
1365-
},
1366-
composite: 'replace'
1376+
}
13671377
},
13681378
// 2. Horizontal Spin
13691379
{
@@ -1378,8 +1388,7 @@ <h3 class="font-bold text-lg">Source Code</h3>
13781388
{ transform: 'rotateX(90deg) rotateZ(0deg)' },
13791389
{ transform: 'rotateX(90deg) rotateZ(360deg)' }
13801390
]
1381-
},
1382-
composite: 'replace'
1391+
}
13831392
},
13841393
// 3. Diagonal 1 (+45)
13851394
{
@@ -1393,8 +1402,7 @@ <h3 class="font-bold text-lg">Source Code</h3>
13931402
{ transform: 'rotateZ(45deg) rotateY(0deg)' },
13941403
{ transform: 'rotateZ(45deg) rotateY(360deg)' }
13951404
]
1396-
},
1397-
composite: 'replace'
1405+
}
13981406
},
13991407
// 4. Diagonal 2 (-45)
14001408
{
@@ -1408,8 +1416,7 @@ <h3 class="font-bold text-lg">Source Code</h3>
14081416
{ transform: 'rotateZ(-45deg) rotateY(0deg)' },
14091417
{ transform: 'rotateZ(-45deg) rotateY(-360deg)' }
14101418
]
1411-
},
1412-
composite: 'replace'
1419+
}
14131420
}
14141421
]
14151422
`
@@ -1460,7 +1467,8 @@ <h3 class="font-bold text-lg">Source Code</h3>
14601467

14611468
<!-- WIX INTERACT RUNTIME -->
14621469
<script type="module">
1463-
import { Interact } from 'https://esm.sh/@wix/interact@1.92.0';
1470+
// import { Interact } from 'https://esm.sh/@wix/interact@1.92.0';
1471+
import { Interact } from './packages/interact/dist/es/web.js';
14641472

14651473
// --- 1. HERO GRID LOGIC ---
14661474
const gridContainer = document.getElementById('grid-container');

0 commit comments

Comments
 (0)