@react-kino/templates 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bilal Tahir
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/case-study.d.mts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CaseStudyProps {
+    /** Project title */
+    title: string;
+    /** Client name */
+    client: string;
+    /** Year of project */
+    year: string | number;
+    /** Optional hero background image URL */
+    heroImage?: string;
+    /** Project overview text */
+    overview: string;
+    /** The challenge faced */
+    challenge: string;
+    /** The solution delivered */
+    solution: string;
+    /** Measurable results */
+    results?: Array<{
+        metric: string;
+        value: number;
+        format?: (n: number) => string;
+    }>;
+    /** Link to the next project */
+    nextProject?: {
+        title: string;
+        href: string;
+    };
+}
+declare function CaseStudy({ title, client, year, heroImage, overview, challenge, solution, results, nextProject, }: CaseStudyProps): react_jsx_runtime.JSX.Element;
+
+export { CaseStudy };

package/dist/case-study.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CaseStudyProps {
+    /** Project title */
+    title: string;
+    /** Client name */
+    client: string;
+    /** Year of project */
+    year: string | number;
+    /** Optional hero background image URL */
+    heroImage?: string;
+    /** Project overview text */
+    overview: string;
+    /** The challenge faced */
+    challenge: string;
+    /** The solution delivered */
+    solution: string;
+    /** Measurable results */
+    results?: Array<{
+        metric: string;
+        value: number;
+        format?: (n: number) => string;
+    }>;
+    /** Link to the next project */
+    nextProject?: {
+        title: string;
+        href: string;
+    };
+}
+declare function CaseStudy({ title, client, year, heroImage, overview, challenge, solution, results, nextProject, }: CaseStudyProps): react_jsx_runtime.JSX.Element;
+
+export { CaseStudy };

package/dist/case-study.js

@@ -0,0 +1,2 @@
+"use client";
+'use strict';var reactKino=require('react-kino'),jsxRuntime=require('react/jsx-runtime');function w({title:g,client:c,year:d,heroImage:o,overview:f,challenge:v,solution:y,results:m=[],nextProject:l}){let u={margin:0,padding:0,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',color:"#ffffff",background:"#0a0a0a",WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},r={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100vh",padding:"0 24px",textAlign:"center"},p=f.split(/\n\n|\n/).filter(i=>i.trim().length>0);return jsxRuntime.jsx("div",{style:u,children:jsxRuntime.jsxs(reactKino.Kino,{children:[jsxRuntime.jsx(reactKino.Progress,{color:"#e5e5e5",position:"top"}),jsxRuntime.jsxs("div",{style:{position:"relative",height:"100vh",overflow:"hidden"},children:[jsxRuntime.jsxs(reactKino.Parallax,{speed:.4,children:[jsxRuntime.jsx("div",{style:{position:"absolute",inset:"-20%",background:o?`url(${o}) center/cover no-repeat`:"linear-gradient(160deg, #111 0%, #1a1a2e 50%, #0a0a0a 100%)"}}),o&&jsxRuntime.jsx("div",{style:{position:"absolute",inset:0,background:"linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%)"}})]}),jsxRuntime.jsxs("div",{style:{...r,position:"relative",zIndex:1,gap:"16px"},children:[jsxRuntime.jsxs("p",{style:{fontSize:"0.875rem",textTransform:"uppercase",letterSpacing:"0.15em",color:"rgba(255, 255, 255, 0.5)",margin:0},children:[c," \xB7 ",d]}),jsxRuntime.jsx("h1",{style:{fontSize:"clamp(2.5rem, 8vw, 6rem)",fontWeight:800,letterSpacing:"-0.04em",lineHeight:1.05,margin:0,maxWidth:"900px"},children:g})]})]}),jsxRuntime.jsx(reactKino.Scene,{duration:"200vh",children:jsxRuntime.jsx("div",{style:r,children:jsxRuntime.jsxs("div",{style:{maxWidth:"680px"},children:[jsxRuntime.jsx(reactKino.Reveal,{at:.1,animation:"fade-up",children:jsxRuntime.jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",marginBottom:"32px"},children:"Overview"})}),p.map((i,n)=>{let S=p.length>1?.6/(p.length-1):0;return jsxRuntime.jsx(reactKino.Reveal,{at:.2+n*S,animation:"fade-up",duration:800,children:jsxRuntime.jsx("p",{style:{fontSize:"clamp(1.125rem, 2.5vw, 1.5rem)",lineHeight:1.7,color:"rgba(255, 255, 255, 0.7)",margin:"0 0 24px"},children:i})},n)})]})})}),jsxRuntime.jsx(reactKino.Scene,{duration:"250vh",children:jsxRuntime.jsx("div",{style:r,children:jsxRuntime.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"64px",maxWidth:"1000px",width:"100%",padding:"0 24px",textAlign:"left"},children:[jsxRuntime.jsx(reactKino.Reveal,{at:.2,animation:"fade-up",duration:800,children:jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"#ef4444",marginBottom:"16px"},children:"The Challenge"}),jsxRuntime.jsx("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",lineHeight:1.7,color:"rgba(255, 255, 255, 0.7)",margin:0},children:v})]})}),jsxRuntime.jsx(reactKino.Reveal,{at:.6,animation:"fade-up",duration:800,children:jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"#22c55e",marginBottom:"16px"},children:"The Solution"}),jsxRuntime.jsx("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",lineHeight:1.7,color:"rgba(255, 255, 255, 0.7)",margin:0},children:y})]})})]})})}),m.length>0&&jsxRuntime.jsx(reactKino.Scene,{duration:"150vh",children:jsxRuntime.jsxs("div",{style:r,children:[jsxRuntime.jsx(reactKino.Reveal,{at:.1,animation:"fade",children:jsxRuntime.jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",marginBottom:"48px"},children:"Results"})}),jsxRuntime.jsx("div",{style:{display:"flex",flexWrap:"wrap",justifyContent:"center",gap:"64px"},children:m.map((i,n)=>jsxRuntime.jsxs("div",{style:{textAlign:"center"},children:[jsxRuntime.jsx("div",{style:{fontSize:"clamp(2.5rem, 6vw, 4.5rem)",fontWeight:800,letterSpacing:"-0.02em"},children:jsxRuntime.jsx(reactKino.Counter,{from:0,to:i.value,at:.2+n*.15,span:.35,format:i.format})}),jsxRuntime.jsx("p",{style:{fontSize:"0.875rem",color:"rgba(255, 255, 255, 0.5)",marginTop:"8px",textTransform:"uppercase",letterSpacing:"0.08em"},children:i.metric})]},i.metric))})]})}),l&&jsxRuntime.jsxs("div",{style:r,children:[jsxRuntime.jsx("p",{style:{fontSize:"0.875rem",textTransform:"uppercase",letterSpacing:"0.15em",color:"rgba(255, 255, 255, 0.35)",margin:"0 0 24px"},children:"Next Project"}),jsxRuntime.jsxs("a",{href:l.href,style:{fontSize:"clamp(2rem, 5vw, 4rem)",fontWeight:700,color:"#ffffff",textDecoration:"none",letterSpacing:"-0.02em",transition:"opacity 150ms ease",lineHeight:1.2},onMouseEnter:i=>{i.currentTarget.style.opacity="0.6";},onMouseLeave:i=>{i.currentTarget.style.opacity="1";},children:[l.title," \u2192"]})]})]})})}exports.CaseStudy=w;

package/dist/case-study.mjs

@@ -0,0 +1,2 @@
+"use client";
+import {Kino,Progress,Parallax,Scene,Reveal,Counter}from'react-kino';import {jsx,jsxs}from'react/jsx-runtime';function w({title:g,client:c,year:d,heroImage:o,overview:f,challenge:v,solution:y,results:m=[],nextProject:l}){let u={margin:0,padding:0,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',color:"#ffffff",background:"#0a0a0a",WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},r={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100vh",padding:"0 24px",textAlign:"center"},p=f.split(/\n\n|\n/).filter(i=>i.trim().length>0);return jsx("div",{style:u,children:jsxs(Kino,{children:[jsx(Progress,{color:"#e5e5e5",position:"top"}),jsxs("div",{style:{position:"relative",height:"100vh",overflow:"hidden"},children:[jsxs(Parallax,{speed:.4,children:[jsx("div",{style:{position:"absolute",inset:"-20%",background:o?`url(${o}) center/cover no-repeat`:"linear-gradient(160deg, #111 0%, #1a1a2e 50%, #0a0a0a 100%)"}}),o&&jsx("div",{style:{position:"absolute",inset:0,background:"linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%)"}})]}),jsxs("div",{style:{...r,position:"relative",zIndex:1,gap:"16px"},children:[jsxs("p",{style:{fontSize:"0.875rem",textTransform:"uppercase",letterSpacing:"0.15em",color:"rgba(255, 255, 255, 0.5)",margin:0},children:[c," \xB7 ",d]}),jsx("h1",{style:{fontSize:"clamp(2.5rem, 8vw, 6rem)",fontWeight:800,letterSpacing:"-0.04em",lineHeight:1.05,margin:0,maxWidth:"900px"},children:g})]})]}),jsx(Scene,{duration:"200vh",children:jsx("div",{style:r,children:jsxs("div",{style:{maxWidth:"680px"},children:[jsx(Reveal,{at:.1,animation:"fade-up",children:jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",marginBottom:"32px"},children:"Overview"})}),p.map((i,n)=>{let S=p.length>1?.6/(p.length-1):0;return jsx(Reveal,{at:.2+n*S,animation:"fade-up",duration:800,children:jsx("p",{style:{fontSize:"clamp(1.125rem, 2.5vw, 1.5rem)",lineHeight:1.7,color:"rgba(255, 255, 255, 0.7)",margin:"0 0 24px"},children:i})},n)})]})})}),jsx(Scene,{duration:"250vh",children:jsx("div",{style:r,children:jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"64px",maxWidth:"1000px",width:"100%",padding:"0 24px",textAlign:"left"},children:[jsx(Reveal,{at:.2,animation:"fade-up",duration:800,children:jsxs("div",{children:[jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"#ef4444",marginBottom:"16px"},children:"The Challenge"}),jsx("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",lineHeight:1.7,color:"rgba(255, 255, 255, 0.7)",margin:0},children:v})]})}),jsx(Reveal,{at:.6,animation:"fade-up",duration:800,children:jsxs("div",{children:[jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"#22c55e",marginBottom:"16px"},children:"The Solution"}),jsx("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",lineHeight:1.7,color:"rgba(255, 255, 255, 0.7)",margin:0},children:y})]})})]})})}),m.length>0&&jsx(Scene,{duration:"150vh",children:jsxs("div",{style:r,children:[jsx(Reveal,{at:.1,animation:"fade",children:jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",marginBottom:"48px"},children:"Results"})}),jsx("div",{style:{display:"flex",flexWrap:"wrap",justifyContent:"center",gap:"64px"},children:m.map((i,n)=>jsxs("div",{style:{textAlign:"center"},children:[jsx("div",{style:{fontSize:"clamp(2.5rem, 6vw, 4.5rem)",fontWeight:800,letterSpacing:"-0.02em"},children:jsx(Counter,{from:0,to:i.value,at:.2+n*.15,span:.35,format:i.format})}),jsx("p",{style:{fontSize:"0.875rem",color:"rgba(255, 255, 255, 0.5)",marginTop:"8px",textTransform:"uppercase",letterSpacing:"0.08em"},children:i.metric})]},i.metric))})]})}),l&&jsxs("div",{style:r,children:[jsx("p",{style:{fontSize:"0.875rem",textTransform:"uppercase",letterSpacing:"0.15em",color:"rgba(255, 255, 255, 0.35)",margin:"0 0 24px"},children:"Next Project"}),jsxs("a",{href:l.href,style:{fontSize:"clamp(2rem, 5vw, 4rem)",fontWeight:700,color:"#ffffff",textDecoration:"none",letterSpacing:"-0.02em",transition:"opacity 150ms ease",lineHeight:1.2},onMouseEnter:i=>{i.currentTarget.style.opacity="0.6";},onMouseLeave:i=>{i.currentTarget.style.opacity="1";},children:[l.title," \u2192"]})]})]})})}export{w as CaseStudy};

package/dist/index.d.mts

@@ -0,0 +1,4 @@
+export { ProductLaunch } from './product-launch.mjs';
+export { CaseStudy } from './case-study.mjs';
+export { Portfolio } from './portfolio.mjs';
+import 'react/jsx-runtime';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { ProductLaunch } from './product-launch.js';
+export { CaseStudy } from './case-study.js';
+export { Portfolio } from './portfolio.js';
+import 'react/jsx-runtime';

package/dist/index.js

@@ -0,0 +1,2 @@
+"use client";
+'use strict';var reactKino=require('react-kino'),jsxRuntime=require('react/jsx-runtime');var B=[{value:10,label:"Times faster",format:o=>`${o}x`},{value:99.9,label:"Uptime",format:o=>`${o.toFixed(1)}%`},{value:5e4,label:"Users worldwide",format:o=>o.toLocaleString()+"+"}],M=[{title:"Lightning Fast",description:"Built from the ground up for speed. Every millisecond counts.",icon:"\u26A1"},{title:"Beautifully Crafted",description:"Pixel-perfect design that looks stunning on every screen size.",icon:"\u2728"},{title:"Infinitely Scalable",description:"From prototype to production, it grows with your ambitions.",icon:"\u{1F680}"}];function I({name:o,tagline:f,heroBackground:c="linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 100%)",accentColor:i="#dc2626",stats:g,features:x}){let u=g??B,y=x??M,d={margin:0,padding:0,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',color:"#ffffff",background:"#0a0a0a",WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},n={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100vh",padding:"0 24px",textAlign:"center"};return jsxRuntime.jsx("div",{style:d,children:jsxRuntime.jsxs(reactKino.Kino,{children:[jsxRuntime.jsx(reactKino.Progress,{color:i,position:"top"}),jsxRuntime.jsxs("div",{style:{position:"relative",height:"100vh",overflow:"hidden"},children:[jsxRuntime.jsx(reactKino.Parallax,{speed:.5,children:jsxRuntime.jsx("div",{style:{position:"absolute",inset:"-20%",background:c}})}),jsxRuntime.jsxs("div",{style:{...n,position:"relative",zIndex:1},children:[jsxRuntime.jsx("h1",{style:{fontSize:"clamp(3rem, 10vw, 8rem)",fontWeight:800,letterSpacing:"-0.04em",lineHeight:1,margin:0,backgroundImage:`linear-gradient(135deg, #ffffff 0%, ${i} 100%)`,WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:o}),jsxRuntime.jsx("p",{style:{fontSize:"clamp(1.125rem, 2.5vw, 1.5rem)",color:"rgba(255, 255, 255, 0.6)",marginTop:"24px",maxWidth:"600px",lineHeight:1.6},children:f})]})]}),jsxRuntime.jsx(reactKino.Scene,{duration:"150vh",children:jsxRuntime.jsx("div",{style:n,children:jsxRuntime.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(280px, 1fr))",gap:"32px",maxWidth:"1000px",width:"100%",padding:"0 24px"},children:[{label:"Built for",value:"Performance",desc:"Zero compromises on speed. Every interaction feels instant."},{label:"Designed for",value:"Developers",desc:"Clean APIs, comprehensive docs, and a delightful DX."},{label:"Made for",value:"Scale",desc:"From side project to enterprise. No ceiling on growth."}].map((e,p)=>jsxRuntime.jsx(reactKino.Reveal,{at:.2+p*.2,animation:"fade-up",duration:800,children:jsxRuntime.jsxs("div",{style:{padding:"40px 32px",borderRadius:"16px",background:"rgba(255, 255, 255, 0.03)",border:"1px solid rgba(255, 255, 255, 0.06)",backdropFilter:"blur(12px)"},children:[jsxRuntime.jsx("p",{style:{fontSize:"0.875rem",textTransform:"uppercase",letterSpacing:"0.1em",color:i,margin:0},children:e.label}),jsxRuntime.jsx("h2",{style:{fontSize:"2rem",fontWeight:700,margin:"8px 0 16px"},children:e.value}),jsxRuntime.jsx("p",{style:{color:"rgba(255, 255, 255, 0.5)",margin:0,lineHeight:1.6},children:e.desc})]})},e.value))})})}),u.length>0&&jsxRuntime.jsx(reactKino.Scene,{duration:"150vh",children:jsxRuntime.jsx("div",{style:n,children:jsxRuntime.jsx("div",{style:{display:"flex",flexWrap:"wrap",justifyContent:"center",gap:"64px"},children:u.map((e,p)=>jsxRuntime.jsxs("div",{style:{textAlign:"center"},children:[jsxRuntime.jsx("div",{style:{fontSize:"clamp(2.5rem, 6vw, 5rem)",fontWeight:800,letterSpacing:"-0.02em",backgroundImage:`linear-gradient(135deg, #ffffff 0%, ${i} 100%)`,WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:jsxRuntime.jsx(reactKino.Counter,{from:0,to:e.value,at:.15+p*.15,span:.4,format:e.format})}),jsxRuntime.jsx("p",{style:{fontSize:"1rem",color:"rgba(255, 255, 255, 0.5)",marginTop:"8px",textTransform:"uppercase",letterSpacing:"0.08em"},children:e.label})]},e.label))})})}),y.length>0&&jsxRuntime.jsx(reactKino.HorizontalScroll,{children:y.map(e=>jsxRuntime.jsx(reactKino.Panel,{children:jsxRuntime.jsxs("div",{style:{...n,background:"radial-gradient(ellipse at center, rgba(124, 58, 237, 0.08) 0%, transparent 70%)"},children:[e.icon&&jsxRuntime.jsx("span",{style:{fontSize:"4rem",marginBottom:"24px"},children:e.icon}),jsxRuntime.jsx("h3",{style:{fontSize:"clamp(2rem, 5vw, 3.5rem)",fontWeight:700,margin:0},children:e.title}),jsxRuntime.jsx("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",color:"rgba(255, 255, 255, 0.5)",marginTop:"16px",maxWidth:"480px",lineHeight:1.6},children:e.description})]})},e.title))}),jsxRuntime.jsxs("div",{style:{...n,background:`radial-gradient(ellipse at center, ${i}15 0%, transparent 70%)`},children:[jsxRuntime.jsxs("h2",{style:{fontSize:"clamp(2.5rem, 6vw, 4.5rem)",fontWeight:800,letterSpacing:"-0.03em",margin:0,lineHeight:1.1},children:["Ready for ",o,"?"]}),jsxRuntime.jsxs("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",color:"rgba(255, 255, 255, 0.5)",marginTop:"16px",marginBottom:"40px"},children:["Join thousands of teams already building with ",o,"."]}),jsxRuntime.jsx("button",{style:{padding:"16px 40px",fontSize:"1.125rem",fontWeight:600,color:"#ffffff",background:i,border:"none",borderRadius:"12px",cursor:"pointer",transition:"transform 150ms ease, box-shadow 150ms ease",boxShadow:`0 0 40px ${i}40`},onMouseEnter:e=>{e.currentTarget.style.transform="translateY(-2px)",e.currentTarget.style.boxShadow=`0 0 60px ${i}60`;},onMouseLeave:e=>{e.currentTarget.style.transform="translateY(0)",e.currentTarget.style.boxShadow=`0 0 40px ${i}40`;},children:"Get Started"})]})]})})}function K({title:o,client:f,year:c,heroImage:i,overview:g,challenge:x,solution:u,results:y=[],nextProject:d}){let n={margin:0,padding:0,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',color:"#ffffff",background:"#0a0a0a",WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},e={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100vh",padding:"0 24px",textAlign:"center"},p=g.split(/\n\n|\n/).filter(l=>l.trim().length>0);return jsxRuntime.jsx("div",{style:n,children:jsxRuntime.jsxs(reactKino.Kino,{children:[jsxRuntime.jsx(reactKino.Progress,{color:"#e5e5e5",position:"top"}),jsxRuntime.jsxs("div",{style:{position:"relative",height:"100vh",overflow:"hidden"},children:[jsxRuntime.jsxs(reactKino.Parallax,{speed:.4,children:[jsxRuntime.jsx("div",{style:{position:"absolute",inset:"-20%",background:i?`url(${i}) center/cover no-repeat`:"linear-gradient(160deg, #111 0%, #1a1a2e 50%, #0a0a0a 100%)"}}),i&&jsxRuntime.jsx("div",{style:{position:"absolute",inset:0,background:"linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%)"}})]}),jsxRuntime.jsxs("div",{style:{...e,position:"relative",zIndex:1,gap:"16px"},children:[jsxRuntime.jsxs("p",{style:{fontSize:"0.875rem",textTransform:"uppercase",letterSpacing:"0.15em",color:"rgba(255, 255, 255, 0.5)",margin:0},children:[f," \xB7 ",c]}),jsxRuntime.jsx("h1",{style:{fontSize:"clamp(2.5rem, 8vw, 6rem)",fontWeight:800,letterSpacing:"-0.04em",lineHeight:1.05,margin:0,maxWidth:"900px"},children:o})]})]}),jsxRuntime.jsx(reactKino.Scene,{duration:"200vh",children:jsxRuntime.jsx("div",{style:e,children:jsxRuntime.jsxs("div",{style:{maxWidth:"680px"},children:[jsxRuntime.jsx(reactKino.Reveal,{at:.1,animation:"fade-up",children:jsxRuntime.jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",marginBottom:"32px"},children:"Overview"})}),p.map((l,S)=>{let P=p.length>1?.6/(p.length-1):0;return jsxRuntime.jsx(reactKino.Reveal,{at:.2+S*P,animation:"fade-up",duration:800,children:jsxRuntime.jsx("p",{style:{fontSize:"clamp(1.125rem, 2.5vw, 1.5rem)",lineHeight:1.7,color:"rgba(255, 255, 255, 0.7)",margin:"0 0 24px"},children:l})},S)})]})})}),jsxRuntime.jsx(reactKino.Scene,{duration:"250vh",children:jsxRuntime.jsx("div",{style:e,children:jsxRuntime.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"64px",maxWidth:"1000px",width:"100%",padding:"0 24px",textAlign:"left"},children:[jsxRuntime.jsx(reactKino.Reveal,{at:.2,animation:"fade-up",duration:800,children:jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"#ef4444",marginBottom:"16px"},children:"The Challenge"}),jsxRuntime.jsx("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",lineHeight:1.7,color:"rgba(255, 255, 255, 0.7)",margin:0},children:x})]})}),jsxRuntime.jsx(reactKino.Reveal,{at:.6,animation:"fade-up",duration:800,children:jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"#22c55e",marginBottom:"16px"},children:"The Solution"}),jsxRuntime.jsx("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",lineHeight:1.7,color:"rgba(255, 255, 255, 0.7)",margin:0},children:u})]})})]})})}),y.length>0&&jsxRuntime.jsx(reactKino.Scene,{duration:"150vh",children:jsxRuntime.jsxs("div",{style:e,children:[jsxRuntime.jsx(reactKino.Reveal,{at:.1,animation:"fade",children:jsxRuntime.jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",marginBottom:"48px"},children:"Results"})}),jsxRuntime.jsx("div",{style:{display:"flex",flexWrap:"wrap",justifyContent:"center",gap:"64px"},children:y.map((l,S)=>jsxRuntime.jsxs("div",{style:{textAlign:"center"},children:[jsxRuntime.jsx("div",{style:{fontSize:"clamp(2.5rem, 6vw, 4.5rem)",fontWeight:800,letterSpacing:"-0.02em"},children:jsxRuntime.jsx(reactKino.Counter,{from:0,to:l.value,at:.2+S*.15,span:.35,format:l.format})}),jsxRuntime.jsx("p",{style:{fontSize:"0.875rem",color:"rgba(255, 255, 255, 0.5)",marginTop:"8px",textTransform:"uppercase",letterSpacing:"0.08em"},children:l.metric})]},l.metric))})]})}),d&&jsxRuntime.jsxs("div",{style:e,children:[jsxRuntime.jsx("p",{style:{fontSize:"0.875rem",textTransform:"uppercase",letterSpacing:"0.15em",color:"rgba(255, 255, 255, 0.35)",margin:"0 0 24px"},children:"Next Project"}),jsxRuntime.jsxs("a",{href:d.href,style:{fontSize:"clamp(2rem, 5vw, 4rem)",fontWeight:700,color:"#ffffff",textDecoration:"none",letterSpacing:"-0.02em",transition:"opacity 150ms ease",lineHeight:1.2},onMouseEnter:l=>{l.currentTarget.style.opacity="0.6";},onMouseLeave:l=>{l.currentTarget.style.opacity="1";},children:[d.title," \u2192"]})]})]})})}function X({name:o,role:f,bio:c,accentColor:i="#3b82f6",projects:g=[],skills:x=[],contactEmail:u}){let y={margin:0,padding:0,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',color:"#ffffff",background:"#050505",WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},d={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100vh",padding:"0 24px",textAlign:"center"};return jsxRuntime.jsx("div",{style:y,children:jsxRuntime.jsxs(reactKino.Kino,{children:[jsxRuntime.jsx(reactKino.Progress,{color:i,position:"top"}),jsxRuntime.jsxs("div",{style:{position:"relative",height:"100vh",overflow:"hidden"},children:[jsxRuntime.jsx(reactKino.Parallax,{speed:.3,children:jsxRuntime.jsx("div",{style:{position:"absolute",inset:"-10%",backgroundImage:"radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px)",backgroundSize:"32px 32px"}})}),jsxRuntime.jsxs("div",{style:{...d,position:"relative",zIndex:1},children:[jsxRuntime.jsx("h1",{style:{fontSize:"clamp(3.5rem, 12vw, 10rem)",fontWeight:900,letterSpacing:"-0.05em",lineHeight:.95,margin:0},children:o}),jsxRuntime.jsx("p",{style:{fontSize:"clamp(1rem, 2.5vw, 1.5rem)",color:i,marginTop:"20px",fontWeight:500,letterSpacing:"0.02em"},children:f})]})]}),jsxRuntime.jsx(reactKino.Scene,{duration:"200vh",children:jsxRuntime.jsx("div",{style:d,children:jsxRuntime.jsx("div",{style:{maxWidth:"750px"},children:jsxRuntime.jsx(reactKino.TextReveal,{mode:"word",at:.05,span:.85,color:"#ffffff",dimColor:"rgba(255, 255, 255, 0.1)",children:c})})})}),g.length>0&&jsxRuntime.jsx(reactKino.Scene,{duration:`${Math.max(g.length*80,200)}vh`,children:jsxRuntime.jsx("div",{style:d,children:jsxRuntime.jsxs("div",{style:{maxWidth:"900px",width:"100%",display:"flex",flexDirection:"column",gap:"40px",padding:"0 24px"},children:[jsxRuntime.jsx(reactKino.Reveal,{at:.05,animation:"fade",children:jsxRuntime.jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",textAlign:"left",margin:0},children:"Selected Work"})}),g.map((n,e)=>{let p=g.length>1?.7/(g.length-1):0;return jsxRuntime.jsx(reactKino.Reveal,{at:.15+e*p,animation:"fade-up",duration:700,children:jsxRuntime.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",padding:"32px 0",borderBottom:"1px solid rgba(255, 255, 255, 0.08)",textAlign:"left",gap:"24px",flexWrap:"wrap"},children:[jsxRuntime.jsxs("div",{style:{flex:1,minWidth:"200px"},children:[jsxRuntime.jsx("h3",{style:{fontSize:"clamp(1.25rem, 3vw, 2rem)",fontWeight:700,margin:"0 0 8px"},children:n.title}),jsxRuntime.jsx("p",{style:{color:"rgba(255, 255, 255, 0.5)",margin:0,lineHeight:1.6,fontSize:"0.95rem"},children:n.description}),n.tags&&n.tags.length>0&&jsxRuntime.jsx("div",{style:{display:"flex",gap:"8px",flexWrap:"wrap",marginTop:"12px"},children:n.tags.map(l=>jsxRuntime.jsx("span",{style:{fontSize:"0.75rem",padding:"4px 12px",borderRadius:"999px",background:`${i}15`,color:i,border:`1px solid ${i}30`},children:l},l))})]}),jsxRuntime.jsx("span",{style:{fontSize:"0.875rem",color:"rgba(255, 255, 255, 0.3)",flexShrink:0},children:n.year})]})},n.title)})]})})}),x.length>0&&jsxRuntime.jsx(reactKino.HorizontalScroll,{children:Z(x,Math.ceil(x.length/3)).map((n,e)=>jsxRuntime.jsx(reactKino.Panel,{children:jsxRuntime.jsxs("div",{style:{...d,gap:"24px"},children:[e===0&&jsxRuntime.jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",margin:"0 0 16px"},children:"Skills & Tools"}),jsxRuntime.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"12px",justifyContent:"center",maxWidth:"600px"},children:n.map(p=>jsxRuntime.jsx("span",{style:{fontSize:"1rem",padding:"10px 24px",borderRadius:"999px",background:"rgba(255, 255, 255, 0.04)",border:"1px solid rgba(255, 255, 255, 0.08)",color:"rgba(255, 255, 255, 0.8)",transition:"border-color 200ms ease"},children:p},p))})]})},e))}),jsxRuntime.jsxs("div",{style:d,children:[jsxRuntime.jsx("p",{style:{fontSize:"clamp(1.25rem, 3vw, 2rem)",color:"rgba(255, 255, 255, 0.4)",margin:"0 0 24px",fontWeight:500},children:"Let's work together"}),u&&jsxRuntime.jsx("a",{href:`mailto:${u}`,style:{fontSize:"clamp(1.5rem, 4vw, 3rem)",fontWeight:700,color:"#ffffff",textDecoration:"none",transition:"color 150ms ease",letterSpacing:"-0.01em"},onMouseEnter:n=>{n.currentTarget.style.color=i;},onMouseLeave:n=>{n.currentTarget.style.color="#ffffff";},children:u})]})]})})}function Z(o,f){let c=[];for(let i=0;i<o.length;i+=f)c.push(o.slice(i,i+f));return c}exports.CaseStudy=K;exports.Portfolio=X;exports.ProductLaunch=I;

package/dist/index.mjs

@@ -0,0 +1,2 @@
+"use client";
+import {Kino,Progress,Parallax,Scene,Reveal,Counter,HorizontalScroll,Panel,TextReveal}from'react-kino';import {jsx,jsxs}from'react/jsx-runtime';var B=[{value:10,label:"Times faster",format:o=>`${o}x`},{value:99.9,label:"Uptime",format:o=>`${o.toFixed(1)}%`},{value:5e4,label:"Users worldwide",format:o=>o.toLocaleString()+"+"}],M=[{title:"Lightning Fast",description:"Built from the ground up for speed. Every millisecond counts.",icon:"\u26A1"},{title:"Beautifully Crafted",description:"Pixel-perfect design that looks stunning on every screen size.",icon:"\u2728"},{title:"Infinitely Scalable",description:"From prototype to production, it grows with your ambitions.",icon:"\u{1F680}"}];function I({name:o,tagline:f,heroBackground:c="linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 100%)",accentColor:i="#dc2626",stats:g,features:x}){let u=g??B,y=x??M,d={margin:0,padding:0,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',color:"#ffffff",background:"#0a0a0a",WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},n={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100vh",padding:"0 24px",textAlign:"center"};return jsx("div",{style:d,children:jsxs(Kino,{children:[jsx(Progress,{color:i,position:"top"}),jsxs("div",{style:{position:"relative",height:"100vh",overflow:"hidden"},children:[jsx(Parallax,{speed:.5,children:jsx("div",{style:{position:"absolute",inset:"-20%",background:c}})}),jsxs("div",{style:{...n,position:"relative",zIndex:1},children:[jsx("h1",{style:{fontSize:"clamp(3rem, 10vw, 8rem)",fontWeight:800,letterSpacing:"-0.04em",lineHeight:1,margin:0,backgroundImage:`linear-gradient(135deg, #ffffff 0%, ${i} 100%)`,WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:o}),jsx("p",{style:{fontSize:"clamp(1.125rem, 2.5vw, 1.5rem)",color:"rgba(255, 255, 255, 0.6)",marginTop:"24px",maxWidth:"600px",lineHeight:1.6},children:f})]})]}),jsx(Scene,{duration:"150vh",children:jsx("div",{style:n,children:jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(280px, 1fr))",gap:"32px",maxWidth:"1000px",width:"100%",padding:"0 24px"},children:[{label:"Built for",value:"Performance",desc:"Zero compromises on speed. Every interaction feels instant."},{label:"Designed for",value:"Developers",desc:"Clean APIs, comprehensive docs, and a delightful DX."},{label:"Made for",value:"Scale",desc:"From side project to enterprise. No ceiling on growth."}].map((e,p)=>jsx(Reveal,{at:.2+p*.2,animation:"fade-up",duration:800,children:jsxs("div",{style:{padding:"40px 32px",borderRadius:"16px",background:"rgba(255, 255, 255, 0.03)",border:"1px solid rgba(255, 255, 255, 0.06)",backdropFilter:"blur(12px)"},children:[jsx("p",{style:{fontSize:"0.875rem",textTransform:"uppercase",letterSpacing:"0.1em",color:i,margin:0},children:e.label}),jsx("h2",{style:{fontSize:"2rem",fontWeight:700,margin:"8px 0 16px"},children:e.value}),jsx("p",{style:{color:"rgba(255, 255, 255, 0.5)",margin:0,lineHeight:1.6},children:e.desc})]})},e.value))})})}),u.length>0&&jsx(Scene,{duration:"150vh",children:jsx("div",{style:n,children:jsx("div",{style:{display:"flex",flexWrap:"wrap",justifyContent:"center",gap:"64px"},children:u.map((e,p)=>jsxs("div",{style:{textAlign:"center"},children:[jsx("div",{style:{fontSize:"clamp(2.5rem, 6vw, 5rem)",fontWeight:800,letterSpacing:"-0.02em",backgroundImage:`linear-gradient(135deg, #ffffff 0%, ${i} 100%)`,WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:jsx(Counter,{from:0,to:e.value,at:.15+p*.15,span:.4,format:e.format})}),jsx("p",{style:{fontSize:"1rem",color:"rgba(255, 255, 255, 0.5)",marginTop:"8px",textTransform:"uppercase",letterSpacing:"0.08em"},children:e.label})]},e.label))})})}),y.length>0&&jsx(HorizontalScroll,{children:y.map(e=>jsx(Panel,{children:jsxs("div",{style:{...n,background:"radial-gradient(ellipse at center, rgba(124, 58, 237, 0.08) 0%, transparent 70%)"},children:[e.icon&&jsx("span",{style:{fontSize:"4rem",marginBottom:"24px"},children:e.icon}),jsx("h3",{style:{fontSize:"clamp(2rem, 5vw, 3.5rem)",fontWeight:700,margin:0},children:e.title}),jsx("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",color:"rgba(255, 255, 255, 0.5)",marginTop:"16px",maxWidth:"480px",lineHeight:1.6},children:e.description})]})},e.title))}),jsxs("div",{style:{...n,background:`radial-gradient(ellipse at center, ${i}15 0%, transparent 70%)`},children:[jsxs("h2",{style:{fontSize:"clamp(2.5rem, 6vw, 4.5rem)",fontWeight:800,letterSpacing:"-0.03em",margin:0,lineHeight:1.1},children:["Ready for ",o,"?"]}),jsxs("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",color:"rgba(255, 255, 255, 0.5)",marginTop:"16px",marginBottom:"40px"},children:["Join thousands of teams already building with ",o,"."]}),jsx("button",{style:{padding:"16px 40px",fontSize:"1.125rem",fontWeight:600,color:"#ffffff",background:i,border:"none",borderRadius:"12px",cursor:"pointer",transition:"transform 150ms ease, box-shadow 150ms ease",boxShadow:`0 0 40px ${i}40`},onMouseEnter:e=>{e.currentTarget.style.transform="translateY(-2px)",e.currentTarget.style.boxShadow=`0 0 60px ${i}60`;},onMouseLeave:e=>{e.currentTarget.style.transform="translateY(0)",e.currentTarget.style.boxShadow=`0 0 40px ${i}40`;},children:"Get Started"})]})]})})}function K({title:o,client:f,year:c,heroImage:i,overview:g,challenge:x,solution:u,results:y=[],nextProject:d}){let n={margin:0,padding:0,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',color:"#ffffff",background:"#0a0a0a",WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},e={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100vh",padding:"0 24px",textAlign:"center"},p=g.split(/\n\n|\n/).filter(l=>l.trim().length>0);return jsx("div",{style:n,children:jsxs(Kino,{children:[jsx(Progress,{color:"#e5e5e5",position:"top"}),jsxs("div",{style:{position:"relative",height:"100vh",overflow:"hidden"},children:[jsxs(Parallax,{speed:.4,children:[jsx("div",{style:{position:"absolute",inset:"-20%",background:i?`url(${i}) center/cover no-repeat`:"linear-gradient(160deg, #111 0%, #1a1a2e 50%, #0a0a0a 100%)"}}),i&&jsx("div",{style:{position:"absolute",inset:0,background:"linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%)"}})]}),jsxs("div",{style:{...e,position:"relative",zIndex:1,gap:"16px"},children:[jsxs("p",{style:{fontSize:"0.875rem",textTransform:"uppercase",letterSpacing:"0.15em",color:"rgba(255, 255, 255, 0.5)",margin:0},children:[f," \xB7 ",c]}),jsx("h1",{style:{fontSize:"clamp(2.5rem, 8vw, 6rem)",fontWeight:800,letterSpacing:"-0.04em",lineHeight:1.05,margin:0,maxWidth:"900px"},children:o})]})]}),jsx(Scene,{duration:"200vh",children:jsx("div",{style:e,children:jsxs("div",{style:{maxWidth:"680px"},children:[jsx(Reveal,{at:.1,animation:"fade-up",children:jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",marginBottom:"32px"},children:"Overview"})}),p.map((l,S)=>{let P=p.length>1?.6/(p.length-1):0;return jsx(Reveal,{at:.2+S*P,animation:"fade-up",duration:800,children:jsx("p",{style:{fontSize:"clamp(1.125rem, 2.5vw, 1.5rem)",lineHeight:1.7,color:"rgba(255, 255, 255, 0.7)",margin:"0 0 24px"},children:l})},S)})]})})}),jsx(Scene,{duration:"250vh",children:jsx("div",{style:e,children:jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"64px",maxWidth:"1000px",width:"100%",padding:"0 24px",textAlign:"left"},children:[jsx(Reveal,{at:.2,animation:"fade-up",duration:800,children:jsxs("div",{children:[jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"#ef4444",marginBottom:"16px"},children:"The Challenge"}),jsx("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",lineHeight:1.7,color:"rgba(255, 255, 255, 0.7)",margin:0},children:x})]})}),jsx(Reveal,{at:.6,animation:"fade-up",duration:800,children:jsxs("div",{children:[jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"#22c55e",marginBottom:"16px"},children:"The Solution"}),jsx("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",lineHeight:1.7,color:"rgba(255, 255, 255, 0.7)",margin:0},children:u})]})})]})})}),y.length>0&&jsx(Scene,{duration:"150vh",children:jsxs("div",{style:e,children:[jsx(Reveal,{at:.1,animation:"fade",children:jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",marginBottom:"48px"},children:"Results"})}),jsx("div",{style:{display:"flex",flexWrap:"wrap",justifyContent:"center",gap:"64px"},children:y.map((l,S)=>jsxs("div",{style:{textAlign:"center"},children:[jsx("div",{style:{fontSize:"clamp(2.5rem, 6vw, 4.5rem)",fontWeight:800,letterSpacing:"-0.02em"},children:jsx(Counter,{from:0,to:l.value,at:.2+S*.15,span:.35,format:l.format})}),jsx("p",{style:{fontSize:"0.875rem",color:"rgba(255, 255, 255, 0.5)",marginTop:"8px",textTransform:"uppercase",letterSpacing:"0.08em"},children:l.metric})]},l.metric))})]})}),d&&jsxs("div",{style:e,children:[jsx("p",{style:{fontSize:"0.875rem",textTransform:"uppercase",letterSpacing:"0.15em",color:"rgba(255, 255, 255, 0.35)",margin:"0 0 24px"},children:"Next Project"}),jsxs("a",{href:d.href,style:{fontSize:"clamp(2rem, 5vw, 4rem)",fontWeight:700,color:"#ffffff",textDecoration:"none",letterSpacing:"-0.02em",transition:"opacity 150ms ease",lineHeight:1.2},onMouseEnter:l=>{l.currentTarget.style.opacity="0.6";},onMouseLeave:l=>{l.currentTarget.style.opacity="1";},children:[d.title," \u2192"]})]})]})})}function X({name:o,role:f,bio:c,accentColor:i="#3b82f6",projects:g=[],skills:x=[],contactEmail:u}){let y={margin:0,padding:0,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',color:"#ffffff",background:"#050505",WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},d={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100vh",padding:"0 24px",textAlign:"center"};return jsx("div",{style:y,children:jsxs(Kino,{children:[jsx(Progress,{color:i,position:"top"}),jsxs("div",{style:{position:"relative",height:"100vh",overflow:"hidden"},children:[jsx(Parallax,{speed:.3,children:jsx("div",{style:{position:"absolute",inset:"-10%",backgroundImage:"radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px)",backgroundSize:"32px 32px"}})}),jsxs("div",{style:{...d,position:"relative",zIndex:1},children:[jsx("h1",{style:{fontSize:"clamp(3.5rem, 12vw, 10rem)",fontWeight:900,letterSpacing:"-0.05em",lineHeight:.95,margin:0},children:o}),jsx("p",{style:{fontSize:"clamp(1rem, 2.5vw, 1.5rem)",color:i,marginTop:"20px",fontWeight:500,letterSpacing:"0.02em"},children:f})]})]}),jsx(Scene,{duration:"200vh",children:jsx("div",{style:d,children:jsx("div",{style:{maxWidth:"750px"},children:jsx(TextReveal,{mode:"word",at:.05,span:.85,color:"#ffffff",dimColor:"rgba(255, 255, 255, 0.1)",children:c})})})}),g.length>0&&jsx(Scene,{duration:`${Math.max(g.length*80,200)}vh`,children:jsx("div",{style:d,children:jsxs("div",{style:{maxWidth:"900px",width:"100%",display:"flex",flexDirection:"column",gap:"40px",padding:"0 24px"},children:[jsx(Reveal,{at:.05,animation:"fade",children:jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",textAlign:"left",margin:0},children:"Selected Work"})}),g.map((n,e)=>{let p=g.length>1?.7/(g.length-1):0;return jsx(Reveal,{at:.15+e*p,animation:"fade-up",duration:700,children:jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",padding:"32px 0",borderBottom:"1px solid rgba(255, 255, 255, 0.08)",textAlign:"left",gap:"24px",flexWrap:"wrap"},children:[jsxs("div",{style:{flex:1,minWidth:"200px"},children:[jsx("h3",{style:{fontSize:"clamp(1.25rem, 3vw, 2rem)",fontWeight:700,margin:"0 0 8px"},children:n.title}),jsx("p",{style:{color:"rgba(255, 255, 255, 0.5)",margin:0,lineHeight:1.6,fontSize:"0.95rem"},children:n.description}),n.tags&&n.tags.length>0&&jsx("div",{style:{display:"flex",gap:"8px",flexWrap:"wrap",marginTop:"12px"},children:n.tags.map(l=>jsx("span",{style:{fontSize:"0.75rem",padding:"4px 12px",borderRadius:"999px",background:`${i}15`,color:i,border:`1px solid ${i}30`},children:l},l))})]}),jsx("span",{style:{fontSize:"0.875rem",color:"rgba(255, 255, 255, 0.3)",flexShrink:0},children:n.year})]})},n.title)})]})})}),x.length>0&&jsx(HorizontalScroll,{children:Z(x,Math.ceil(x.length/3)).map((n,e)=>jsx(Panel,{children:jsxs("div",{style:{...d,gap:"24px"},children:[e===0&&jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",margin:"0 0 16px"},children:"Skills & Tools"}),jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"12px",justifyContent:"center",maxWidth:"600px"},children:n.map(p=>jsx("span",{style:{fontSize:"1rem",padding:"10px 24px",borderRadius:"999px",background:"rgba(255, 255, 255, 0.04)",border:"1px solid rgba(255, 255, 255, 0.08)",color:"rgba(255, 255, 255, 0.8)",transition:"border-color 200ms ease"},children:p},p))})]})},e))}),jsxs("div",{style:d,children:[jsx("p",{style:{fontSize:"clamp(1.25rem, 3vw, 2rem)",color:"rgba(255, 255, 255, 0.4)",margin:"0 0 24px",fontWeight:500},children:"Let's work together"}),u&&jsx("a",{href:`mailto:${u}`,style:{fontSize:"clamp(1.5rem, 4vw, 3rem)",fontWeight:700,color:"#ffffff",textDecoration:"none",transition:"color 150ms ease",letterSpacing:"-0.01em"},onMouseEnter:n=>{n.currentTarget.style.color=i;},onMouseLeave:n=>{n.currentTarget.style.color="#ffffff";},children:u})]})]})})}function Z(o,f){let c=[];for(let i=0;i<o.length;i+=f)c.push(o.slice(i,i+f));return c}export{K as CaseStudy,X as Portfolio,I as ProductLaunch};

package/dist/portfolio.d.mts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PortfolioProps {
+    /** Your name */
+    name: string;
+    /** Your role / title */
+    role: string;
+    /** Short bio text */
+    bio: string;
+    /** Accent color for highlights */
+    accentColor?: string;
+    /** Portfolio projects */
+    projects?: Array<{
+        title: string;
+        description: string;
+        year: string | number;
+        tags?: string[];
+    }>;
+    /** List of skills */
+    skills?: string[];
+    /** Contact email address */
+    contactEmail?: string;
+}
+declare function Portfolio({ name, role, bio, accentColor, projects, skills, contactEmail, }: PortfolioProps): react_jsx_runtime.JSX.Element;
+
+export { Portfolio };

package/dist/portfolio.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PortfolioProps {
+    /** Your name */
+    name: string;
+    /** Your role / title */
+    role: string;
+    /** Short bio text */
+    bio: string;
+    /** Accent color for highlights */
+    accentColor?: string;
+    /** Portfolio projects */
+    projects?: Array<{
+        title: string;
+        description: string;
+        year: string | number;
+        tags?: string[];
+    }>;
+    /** List of skills */
+    skills?: string[];
+    /** Contact email address */
+    contactEmail?: string;
+}
+declare function Portfolio({ name, role, bio, accentColor, projects, skills, contactEmail, }: PortfolioProps): react_jsx_runtime.JSX.Element;
+
+export { Portfolio };

package/dist/portfolio.js

@@ -0,0 +1,2 @@
+"use client";
+'use strict';var reactKino=require('react-kino'),jsxRuntime=require('react/jsx-runtime');function w({name:a,role:l,bio:s,accentColor:i="#3b82f6",projects:n=[],skills:d=[],contactEmail:f}){let y={margin:0,padding:0,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',color:"#ffffff",background:"#050505",WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},o={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100vh",padding:"0 24px",textAlign:"center"};return jsxRuntime.jsx("div",{style:y,children:jsxRuntime.jsxs(reactKino.Kino,{children:[jsxRuntime.jsx(reactKino.Progress,{color:i,position:"top"}),jsxRuntime.jsxs("div",{style:{position:"relative",height:"100vh",overflow:"hidden"},children:[jsxRuntime.jsx(reactKino.Parallax,{speed:.3,children:jsxRuntime.jsx("div",{style:{position:"absolute",inset:"-10%",backgroundImage:"radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px)",backgroundSize:"32px 32px"}})}),jsxRuntime.jsxs("div",{style:{...o,position:"relative",zIndex:1},children:[jsxRuntime.jsx("h1",{style:{fontSize:"clamp(3.5rem, 12vw, 10rem)",fontWeight:900,letterSpacing:"-0.05em",lineHeight:.95,margin:0},children:a}),jsxRuntime.jsx("p",{style:{fontSize:"clamp(1rem, 2.5vw, 1.5rem)",color:i,marginTop:"20px",fontWeight:500,letterSpacing:"0.02em"},children:l})]})]}),jsxRuntime.jsx(reactKino.Scene,{duration:"200vh",children:jsxRuntime.jsx("div",{style:o,children:jsxRuntime.jsx("div",{style:{maxWidth:"750px"},children:jsxRuntime.jsx(reactKino.TextReveal,{mode:"word",at:.05,span:.85,color:"#ffffff",dimColor:"rgba(255, 255, 255, 0.1)",children:s})})})}),n.length>0&&jsxRuntime.jsx(reactKino.Scene,{duration:`${Math.max(n.length*80,200)}vh`,children:jsxRuntime.jsx("div",{style:o,children:jsxRuntime.jsxs("div",{style:{maxWidth:"900px",width:"100%",display:"flex",flexDirection:"column",gap:"40px",padding:"0 24px"},children:[jsxRuntime.jsx(reactKino.Reveal,{at:.05,animation:"fade",children:jsxRuntime.jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",textAlign:"left",margin:0},children:"Selected Work"})}),n.map((t,p)=>{let g=n.length>1?.7/(n.length-1):0;return jsxRuntime.jsx(reactKino.Reveal,{at:.15+p*g,animation:"fade-up",duration:700,children:jsxRuntime.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",padding:"32px 0",borderBottom:"1px solid rgba(255, 255, 255, 0.08)",textAlign:"left",gap:"24px",flexWrap:"wrap"},children:[jsxRuntime.jsxs("div",{style:{flex:1,minWidth:"200px"},children:[jsxRuntime.jsx("h3",{style:{fontSize:"clamp(1.25rem, 3vw, 2rem)",fontWeight:700,margin:"0 0 8px"},children:t.title}),jsxRuntime.jsx("p",{style:{color:"rgba(255, 255, 255, 0.5)",margin:0,lineHeight:1.6,fontSize:"0.95rem"},children:t.description}),t.tags&&t.tags.length>0&&jsxRuntime.jsx("div",{style:{display:"flex",gap:"8px",flexWrap:"wrap",marginTop:"12px"},children:t.tags.map(m=>jsxRuntime.jsx("span",{style:{fontSize:"0.75rem",padding:"4px 12px",borderRadius:"999px",background:`${i}15`,color:i,border:`1px solid ${i}30`},children:m},m))})]}),jsxRuntime.jsx("span",{style:{fontSize:"0.875rem",color:"rgba(255, 255, 255, 0.3)",flexShrink:0},children:t.year})]})},t.title)})]})})}),d.length>0&&jsxRuntime.jsx(reactKino.HorizontalScroll,{children:z(d,Math.ceil(d.length/3)).map((t,p)=>jsxRuntime.jsx(reactKino.Panel,{children:jsxRuntime.jsxs("div",{style:{...o,gap:"24px"},children:[p===0&&jsxRuntime.jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",margin:"0 0 16px"},children:"Skills & Tools"}),jsxRuntime.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"12px",justifyContent:"center",maxWidth:"600px"},children:t.map(g=>jsxRuntime.jsx("span",{style:{fontSize:"1rem",padding:"10px 24px",borderRadius:"999px",background:"rgba(255, 255, 255, 0.04)",border:"1px solid rgba(255, 255, 255, 0.08)",color:"rgba(255, 255, 255, 0.8)",transition:"border-color 200ms ease"},children:g},g))})]})},p))}),jsxRuntime.jsxs("div",{style:o,children:[jsxRuntime.jsx("p",{style:{fontSize:"clamp(1.25rem, 3vw, 2rem)",color:"rgba(255, 255, 255, 0.4)",margin:"0 0 24px",fontWeight:500},children:"Let's work together"}),f&&jsxRuntime.jsx("a",{href:`mailto:${f}`,style:{fontSize:"clamp(1.5rem, 4vw, 3rem)",fontWeight:700,color:"#ffffff",textDecoration:"none",transition:"color 150ms ease",letterSpacing:"-0.01em"},onMouseEnter:t=>{t.currentTarget.style.color=i;},onMouseLeave:t=>{t.currentTarget.style.color="#ffffff";},children:f})]})]})})}function z(a,l){let s=[];for(let i=0;i<a.length;i+=l)s.push(a.slice(i,i+l));return s}exports.Portfolio=w;

package/dist/portfolio.mjs

@@ -0,0 +1,2 @@
+"use client";
+import {Kino,Progress,Parallax,Scene,TextReveal,Reveal,HorizontalScroll,Panel}from'react-kino';import {jsx,jsxs}from'react/jsx-runtime';function w({name:a,role:l,bio:s,accentColor:i="#3b82f6",projects:n=[],skills:d=[],contactEmail:f}){let y={margin:0,padding:0,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',color:"#ffffff",background:"#050505",WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},o={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100vh",padding:"0 24px",textAlign:"center"};return jsx("div",{style:y,children:jsxs(Kino,{children:[jsx(Progress,{color:i,position:"top"}),jsxs("div",{style:{position:"relative",height:"100vh",overflow:"hidden"},children:[jsx(Parallax,{speed:.3,children:jsx("div",{style:{position:"absolute",inset:"-10%",backgroundImage:"radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px)",backgroundSize:"32px 32px"}})}),jsxs("div",{style:{...o,position:"relative",zIndex:1},children:[jsx("h1",{style:{fontSize:"clamp(3.5rem, 12vw, 10rem)",fontWeight:900,letterSpacing:"-0.05em",lineHeight:.95,margin:0},children:a}),jsx("p",{style:{fontSize:"clamp(1rem, 2.5vw, 1.5rem)",color:i,marginTop:"20px",fontWeight:500,letterSpacing:"0.02em"},children:l})]})]}),jsx(Scene,{duration:"200vh",children:jsx("div",{style:o,children:jsx("div",{style:{maxWidth:"750px"},children:jsx(TextReveal,{mode:"word",at:.05,span:.85,color:"#ffffff",dimColor:"rgba(255, 255, 255, 0.1)",children:s})})})}),n.length>0&&jsx(Scene,{duration:`${Math.max(n.length*80,200)}vh`,children:jsx("div",{style:o,children:jsxs("div",{style:{maxWidth:"900px",width:"100%",display:"flex",flexDirection:"column",gap:"40px",padding:"0 24px"},children:[jsx(Reveal,{at:.05,animation:"fade",children:jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",textAlign:"left",margin:0},children:"Selected Work"})}),n.map((t,p)=>{let g=n.length>1?.7/(n.length-1):0;return jsx(Reveal,{at:.15+p*g,animation:"fade-up",duration:700,children:jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",padding:"32px 0",borderBottom:"1px solid rgba(255, 255, 255, 0.08)",textAlign:"left",gap:"24px",flexWrap:"wrap"},children:[jsxs("div",{style:{flex:1,minWidth:"200px"},children:[jsx("h3",{style:{fontSize:"clamp(1.25rem, 3vw, 2rem)",fontWeight:700,margin:"0 0 8px"},children:t.title}),jsx("p",{style:{color:"rgba(255, 255, 255, 0.5)",margin:0,lineHeight:1.6,fontSize:"0.95rem"},children:t.description}),t.tags&&t.tags.length>0&&jsx("div",{style:{display:"flex",gap:"8px",flexWrap:"wrap",marginTop:"12px"},children:t.tags.map(m=>jsx("span",{style:{fontSize:"0.75rem",padding:"4px 12px",borderRadius:"999px",background:`${i}15`,color:i,border:`1px solid ${i}30`},children:m},m))})]}),jsx("span",{style:{fontSize:"0.875rem",color:"rgba(255, 255, 255, 0.3)",flexShrink:0},children:t.year})]})},t.title)})]})})}),d.length>0&&jsx(HorizontalScroll,{children:z(d,Math.ceil(d.length/3)).map((t,p)=>jsx(Panel,{children:jsxs("div",{style:{...o,gap:"24px"},children:[p===0&&jsx("p",{style:{fontSize:"0.75rem",textTransform:"uppercase",letterSpacing:"0.2em",color:"rgba(255, 255, 255, 0.35)",margin:"0 0 16px"},children:"Skills & Tools"}),jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"12px",justifyContent:"center",maxWidth:"600px"},children:t.map(g=>jsx("span",{style:{fontSize:"1rem",padding:"10px 24px",borderRadius:"999px",background:"rgba(255, 255, 255, 0.04)",border:"1px solid rgba(255, 255, 255, 0.08)",color:"rgba(255, 255, 255, 0.8)",transition:"border-color 200ms ease"},children:g},g))})]})},p))}),jsxs("div",{style:o,children:[jsx("p",{style:{fontSize:"clamp(1.25rem, 3vw, 2rem)",color:"rgba(255, 255, 255, 0.4)",margin:"0 0 24px",fontWeight:500},children:"Let's work together"}),f&&jsx("a",{href:`mailto:${f}`,style:{fontSize:"clamp(1.5rem, 4vw, 3rem)",fontWeight:700,color:"#ffffff",textDecoration:"none",transition:"color 150ms ease",letterSpacing:"-0.01em"},onMouseEnter:t=>{t.currentTarget.style.color=i;},onMouseLeave:t=>{t.currentTarget.style.color="#ffffff";},children:f})]})]})})}function z(a,l){let s=[];for(let i=0;i<a.length;i+=l)s.push(a.slice(i,i+l));return s}export{w as Portfolio};

package/dist/product-launch.d.mts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ProductLaunchProps {
+    /** Product name */
+    name: string;
+    /** Product tagline */
+    tagline: string;
+    /** Hero background color or gradient */
+    heroBackground?: string;
+    /** Brand accent color */
+    accentColor?: string;
+    /** Stats to display in the counter section */
+    stats?: Array<{
+        value: number;
+        label: string;
+        format?: (n: number) => string;
+    }>;
+    /** Feature panels for horizontal scroll */
+    features?: Array<{
+        title: string;
+        description: string;
+        icon?: string;
+    }>;
+}
+declare function ProductLaunch({ name, tagline, heroBackground, accentColor, stats: statsProp, features: featuresProp, }: ProductLaunchProps): react_jsx_runtime.JSX.Element;
+
+export { ProductLaunch };

package/dist/product-launch.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ProductLaunchProps {
+    /** Product name */
+    name: string;
+    /** Product tagline */
+    tagline: string;
+    /** Hero background color or gradient */
+    heroBackground?: string;
+    /** Brand accent color */
+    accentColor?: string;
+    /** Stats to display in the counter section */
+    stats?: Array<{
+        value: number;
+        label: string;
+        format?: (n: number) => string;
+    }>;
+    /** Feature panels for horizontal scroll */
+    features?: Array<{
+        title: string;
+        description: string;
+        icon?: string;
+    }>;
+}
+declare function ProductLaunch({ name, tagline, heroBackground, accentColor, stats: statsProp, features: featuresProp, }: ProductLaunchProps): react_jsx_runtime.JSX.Element;
+
+export { ProductLaunch };

package/dist/product-launch.js

@@ -0,0 +1,2 @@
+"use client";
+'use strict';var reactKino=require('react-kino'),jsxRuntime=require('react/jsx-runtime');var k=[{value:10,label:"Times faster",format:r=>`${r}x`},{value:99.9,label:"Uptime",format:r=>`${r.toFixed(1)}%`},{value:5e4,label:"Users worldwide",format:r=>r.toLocaleString()+"+"}],w=[{title:"Lightning Fast",description:"Built from the ground up for speed. Every millisecond counts.",icon:"\u26A1"},{title:"Beautifully Crafted",description:"Pixel-perfect design that looks stunning on every screen size.",icon:"\u2728"},{title:"Infinitely Scalable",description:"From prototype to production, it grows with your ambitions.",icon:"\u{1F680}"}];function z({name:r,tagline:d,heroBackground:g="linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 100%)",accentColor:i="#dc2626",stats:m,features:c}){let l=m??k,s=c??w,f={margin:0,padding:0,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',color:"#ffffff",background:"#0a0a0a",WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},n={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100vh",padding:"0 24px",textAlign:"center"};return jsxRuntime.jsx("div",{style:f,children:jsxRuntime.jsxs(reactKino.Kino,{children:[jsxRuntime.jsx(reactKino.Progress,{color:i,position:"top"}),jsxRuntime.jsxs("div",{style:{position:"relative",height:"100vh",overflow:"hidden"},children:[jsxRuntime.jsx(reactKino.Parallax,{speed:.5,children:jsxRuntime.jsx("div",{style:{position:"absolute",inset:"-20%",background:g}})}),jsxRuntime.jsxs("div",{style:{...n,position:"relative",zIndex:1},children:[jsxRuntime.jsx("h1",{style:{fontSize:"clamp(3rem, 10vw, 8rem)",fontWeight:800,letterSpacing:"-0.04em",lineHeight:1,margin:0,backgroundImage:`linear-gradient(135deg, #ffffff 0%, ${i} 100%)`,WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:r}),jsxRuntime.jsx("p",{style:{fontSize:"clamp(1.125rem, 2.5vw, 1.5rem)",color:"rgba(255, 255, 255, 0.6)",marginTop:"24px",maxWidth:"600px",lineHeight:1.6},children:d})]})]}),jsxRuntime.jsx(reactKino.Scene,{duration:"150vh",children:jsxRuntime.jsx("div",{style:n,children:jsxRuntime.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(280px, 1fr))",gap:"32px",maxWidth:"1000px",width:"100%",padding:"0 24px"},children:[{label:"Built for",value:"Performance",desc:"Zero compromises on speed. Every interaction feels instant."},{label:"Designed for",value:"Developers",desc:"Clean APIs, comprehensive docs, and a delightful DX."},{label:"Made for",value:"Scale",desc:"From side project to enterprise. No ceiling on growth."}].map((t,o)=>jsxRuntime.jsx(reactKino.Reveal,{at:.2+o*.2,animation:"fade-up",duration:800,children:jsxRuntime.jsxs("div",{style:{padding:"40px 32px",borderRadius:"16px",background:"rgba(255, 255, 255, 0.03)",border:"1px solid rgba(255, 255, 255, 0.06)",backdropFilter:"blur(12px)"},children:[jsxRuntime.jsx("p",{style:{fontSize:"0.875rem",textTransform:"uppercase",letterSpacing:"0.1em",color:i,margin:0},children:t.label}),jsxRuntime.jsx("h2",{style:{fontSize:"2rem",fontWeight:700,margin:"8px 0 16px"},children:t.value}),jsxRuntime.jsx("p",{style:{color:"rgba(255, 255, 255, 0.5)",margin:0,lineHeight:1.6},children:t.desc})]})},t.value))})})}),l.length>0&&jsxRuntime.jsx(reactKino.Scene,{duration:"150vh",children:jsxRuntime.jsx("div",{style:n,children:jsxRuntime.jsx("div",{style:{display:"flex",flexWrap:"wrap",justifyContent:"center",gap:"64px"},children:l.map((t,o)=>jsxRuntime.jsxs("div",{style:{textAlign:"center"},children:[jsxRuntime.jsx("div",{style:{fontSize:"clamp(2.5rem, 6vw, 5rem)",fontWeight:800,letterSpacing:"-0.02em",backgroundImage:`linear-gradient(135deg, #ffffff 0%, ${i} 100%)`,WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:jsxRuntime.jsx(reactKino.Counter,{from:0,to:t.value,at:.15+o*.15,span:.4,format:t.format})}),jsxRuntime.jsx("p",{style:{fontSize:"1rem",color:"rgba(255, 255, 255, 0.5)",marginTop:"8px",textTransform:"uppercase",letterSpacing:"0.08em"},children:t.label})]},t.label))})})}),s.length>0&&jsxRuntime.jsx(reactKino.HorizontalScroll,{children:s.map(t=>jsxRuntime.jsx(reactKino.Panel,{children:jsxRuntime.jsxs("div",{style:{...n,background:"radial-gradient(ellipse at center, rgba(124, 58, 237, 0.08) 0%, transparent 70%)"},children:[t.icon&&jsxRuntime.jsx("span",{style:{fontSize:"4rem",marginBottom:"24px"},children:t.icon}),jsxRuntime.jsx("h3",{style:{fontSize:"clamp(2rem, 5vw, 3.5rem)",fontWeight:700,margin:0},children:t.title}),jsxRuntime.jsx("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",color:"rgba(255, 255, 255, 0.5)",marginTop:"16px",maxWidth:"480px",lineHeight:1.6},children:t.description})]})},t.title))}),jsxRuntime.jsxs("div",{style:{...n,background:`radial-gradient(ellipse at center, ${i}15 0%, transparent 70%)`},children:[jsxRuntime.jsxs("h2",{style:{fontSize:"clamp(2.5rem, 6vw, 4.5rem)",fontWeight:800,letterSpacing:"-0.03em",margin:0,lineHeight:1.1},children:["Ready for ",r,"?"]}),jsxRuntime.jsxs("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",color:"rgba(255, 255, 255, 0.5)",marginTop:"16px",marginBottom:"40px"},children:["Join thousands of teams already building with ",r,"."]}),jsxRuntime.jsx("button",{style:{padding:"16px 40px",fontSize:"1.125rem",fontWeight:600,color:"#ffffff",background:i,border:"none",borderRadius:"12px",cursor:"pointer",transition:"transform 150ms ease, box-shadow 150ms ease",boxShadow:`0 0 40px ${i}40`},onMouseEnter:t=>{t.currentTarget.style.transform="translateY(-2px)",t.currentTarget.style.boxShadow=`0 0 60px ${i}60`;},onMouseLeave:t=>{t.currentTarget.style.transform="translateY(0)",t.currentTarget.style.boxShadow=`0 0 40px ${i}40`;},children:"Get Started"})]})]})})}exports.ProductLaunch=z;

package/dist/product-launch.mjs

@@ -0,0 +1,2 @@
+"use client";
+import {Kino,Progress,Parallax,Scene,Reveal,Counter,HorizontalScroll,Panel}from'react-kino';import {jsx,jsxs}from'react/jsx-runtime';var k=[{value:10,label:"Times faster",format:r=>`${r}x`},{value:99.9,label:"Uptime",format:r=>`${r.toFixed(1)}%`},{value:5e4,label:"Users worldwide",format:r=>r.toLocaleString()+"+"}],w=[{title:"Lightning Fast",description:"Built from the ground up for speed. Every millisecond counts.",icon:"\u26A1"},{title:"Beautifully Crafted",description:"Pixel-perfect design that looks stunning on every screen size.",icon:"\u2728"},{title:"Infinitely Scalable",description:"From prototype to production, it grows with your ambitions.",icon:"\u{1F680}"}];function z({name:r,tagline:d,heroBackground:g="linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 100%)",accentColor:i="#dc2626",stats:m,features:c}){let l=m??k,s=c??w,f={margin:0,padding:0,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',color:"#ffffff",background:"#0a0a0a",WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},n={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100vh",padding:"0 24px",textAlign:"center"};return jsx("div",{style:f,children:jsxs(Kino,{children:[jsx(Progress,{color:i,position:"top"}),jsxs("div",{style:{position:"relative",height:"100vh",overflow:"hidden"},children:[jsx(Parallax,{speed:.5,children:jsx("div",{style:{position:"absolute",inset:"-20%",background:g}})}),jsxs("div",{style:{...n,position:"relative",zIndex:1},children:[jsx("h1",{style:{fontSize:"clamp(3rem, 10vw, 8rem)",fontWeight:800,letterSpacing:"-0.04em",lineHeight:1,margin:0,backgroundImage:`linear-gradient(135deg, #ffffff 0%, ${i} 100%)`,WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:r}),jsx("p",{style:{fontSize:"clamp(1.125rem, 2.5vw, 1.5rem)",color:"rgba(255, 255, 255, 0.6)",marginTop:"24px",maxWidth:"600px",lineHeight:1.6},children:d})]})]}),jsx(Scene,{duration:"150vh",children:jsx("div",{style:n,children:jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(280px, 1fr))",gap:"32px",maxWidth:"1000px",width:"100%",padding:"0 24px"},children:[{label:"Built for",value:"Performance",desc:"Zero compromises on speed. Every interaction feels instant."},{label:"Designed for",value:"Developers",desc:"Clean APIs, comprehensive docs, and a delightful DX."},{label:"Made for",value:"Scale",desc:"From side project to enterprise. No ceiling on growth."}].map((t,o)=>jsx(Reveal,{at:.2+o*.2,animation:"fade-up",duration:800,children:jsxs("div",{style:{padding:"40px 32px",borderRadius:"16px",background:"rgba(255, 255, 255, 0.03)",border:"1px solid rgba(255, 255, 255, 0.06)",backdropFilter:"blur(12px)"},children:[jsx("p",{style:{fontSize:"0.875rem",textTransform:"uppercase",letterSpacing:"0.1em",color:i,margin:0},children:t.label}),jsx("h2",{style:{fontSize:"2rem",fontWeight:700,margin:"8px 0 16px"},children:t.value}),jsx("p",{style:{color:"rgba(255, 255, 255, 0.5)",margin:0,lineHeight:1.6},children:t.desc})]})},t.value))})})}),l.length>0&&jsx(Scene,{duration:"150vh",children:jsx("div",{style:n,children:jsx("div",{style:{display:"flex",flexWrap:"wrap",justifyContent:"center",gap:"64px"},children:l.map((t,o)=>jsxs("div",{style:{textAlign:"center"},children:[jsx("div",{style:{fontSize:"clamp(2.5rem, 6vw, 5rem)",fontWeight:800,letterSpacing:"-0.02em",backgroundImage:`linear-gradient(135deg, #ffffff 0%, ${i} 100%)`,WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:jsx(Counter,{from:0,to:t.value,at:.15+o*.15,span:.4,format:t.format})}),jsx("p",{style:{fontSize:"1rem",color:"rgba(255, 255, 255, 0.5)",marginTop:"8px",textTransform:"uppercase",letterSpacing:"0.08em"},children:t.label})]},t.label))})})}),s.length>0&&jsx(HorizontalScroll,{children:s.map(t=>jsx(Panel,{children:jsxs("div",{style:{...n,background:"radial-gradient(ellipse at center, rgba(124, 58, 237, 0.08) 0%, transparent 70%)"},children:[t.icon&&jsx("span",{style:{fontSize:"4rem",marginBottom:"24px"},children:t.icon}),jsx("h3",{style:{fontSize:"clamp(2rem, 5vw, 3.5rem)",fontWeight:700,margin:0},children:t.title}),jsx("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",color:"rgba(255, 255, 255, 0.5)",marginTop:"16px",maxWidth:"480px",lineHeight:1.6},children:t.description})]})},t.title))}),jsxs("div",{style:{...n,background:`radial-gradient(ellipse at center, ${i}15 0%, transparent 70%)`},children:[jsxs("h2",{style:{fontSize:"clamp(2.5rem, 6vw, 4.5rem)",fontWeight:800,letterSpacing:"-0.03em",margin:0,lineHeight:1.1},children:["Ready for ",r,"?"]}),jsxs("p",{style:{fontSize:"clamp(1rem, 2vw, 1.25rem)",color:"rgba(255, 255, 255, 0.5)",marginTop:"16px",marginBottom:"40px"},children:["Join thousands of teams already building with ",r,"."]}),jsx("button",{style:{padding:"16px 40px",fontSize:"1.125rem",fontWeight:600,color:"#ffffff",background:i,border:"none",borderRadius:"12px",cursor:"pointer",transition:"transform 150ms ease, box-shadow 150ms ease",boxShadow:`0 0 40px ${i}40`},onMouseEnter:t=>{t.currentTarget.style.transform="translateY(-2px)",t.currentTarget.style.boxShadow=`0 0 60px ${i}60`;},onMouseLeave:t=>{t.currentTarget.style.transform="translateY(0)",t.currentTarget.style.boxShadow=`0 0 40px ${i}40`;},children:"Get Started"})]})]})})}export{z as ProductLaunch};

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@react-kino/templates",
+  "version": "0.1.0",
+  "description": "Pre-built full-page scroll experience templates for react-kino",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./product-launch": {
+      "types": "./dist/product-launch.d.ts",
+      "import": "./dist/product-launch.mjs",
+      "require": "./dist/product-launch.js"
+    },
+    "./case-study": {
+      "types": "./dist/case-study.d.ts",
+      "import": "./dist/case-study.mjs",
+      "require": "./dist/case-study.js"
+    },
+    "./portfolio": {
+      "types": "./dist/portfolio.d.ts",
+      "import": "./dist/portfolio.mjs",
+      "require": "./dist/portfolio.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "react-kino": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "react": "^19",
+    "tsup": "^8",
+    "typescript": "^5"
+  },
+  "author": "Bilal Tahir",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/btahir/react-kino.git",
+    "directory": "packages/templates"
+  },
+  "homepage": "https://github.com/btahir/react-kino#readme",
+  "bugs": {
+    "url": "https://github.com/btahir/react-kino/issues"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/add-use-client.mjs",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  }
+}