@tsparticles/template-landing 4.1.3 → 4.2.0

package/template/react/src/App.tsx

@@ -0,0 +1,114 @@
+import Particles, { ParticlesProvider } from "@tsparticles/react";
+import { loadSlim } from "@tsparticles/slim";
+import type { Engine, ISourceOptions } from "@tsparticles/engine";
+import "./App.css";
+
+async function init(engine: Engine): Promise<void> {
+  await loadSlim(engine);
+}
+
+const options: ISourceOptions = {
+  fullScreen: { enable: true, zIndex: -1 },
+  background: { color: { value: "#080818" } },
+  fpsLimit: 60,
+  particles: {
+    number: { value: 100, density: { enable: true } },
+    color: { value: ["#6c5ce7", "#00cec9", "#fd79a8", "#ffeaa7"] },
+    shape: { type: "circle" },
+    opacity: { value: 0.4, random: true },
+    size: { value: { min: 1, max: 4 }, random: true },
+    links: { enable: true, distance: 150, color: "#6c5ce7", opacity: 0.15, width: 1 },
+    move: { enable: true, speed: 1.5, direction: "none", random: true, straight: false, outModes: { default: "out" } },
+  },
+  interactivity: {
+    events: { onHover: { enable: true, mode: "grab" } },
+    modes: { grab: { distance: 200, links: { opacity: 0.5 } } },
+  },
+  detectRetina: true,
+};
+
+export default function App() {
+  return (
+    <ParticlesProvider init={init}>
+      <Particles id="tsparticles" options={options} />
+      <section id="hero" className="section">
+        <div className="hero-content">
+          <h1>Build Faster.<br /><span className="gradient-text">Go Further.</span></h1>
+          <p className="hero-subtitle">The platform that helps teams ship products at the speed of light.</p>
+          <div className="hero-cta">
+            <a href="#features" className="btn btn-primary">Learn More</a>
+            <a href="#cta" className="btn btn-secondary">Get Started</a>
+          </div>
+        </div>
+      </section>
+      <section id="features" className="section">
+        <div className="container">
+          <h2>Features</h2>
+          <div className="features-grid">
+            {[{ icon: "\u26a1", title: "Blazing Fast", desc: "Optimized for performance from the ground up." },
+              { icon: "\ud83d\udd12", title: "Secure", desc: "Enterprise-grade security built into every layer." },
+              { icon: "\ud83c\udf0d", title: "Global Scale", desc: "Deploy anywhere with our global infrastructure." },
+              { icon: "\ud83c\udfa8", title: "Customizable", desc: "Tailor every aspect to your brand and needs." }
+            ].map((f, i) => (
+              <div key={i} className="feature-card">
+                <div className="feature-icon">{f.icon}</div>
+                <h3>{f.title}</h3>
+                <p>{f.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+      <section id="pricing" className="section">
+        <div className="container">
+          <h2>Pricing</h2>
+          <div className="pricing-grid">
+            {[{ plan: "Starter", price: "$9", features: ["Up to 5 projects", "Basic analytics", "Email support"] },
+              { plan: "Pro", price: "$29", features: ["Unlimited projects", "Advanced analytics", "Priority support", "Custom integrations"], featured: true },
+              { plan: "Enterprise", price: "$99", features: ["Everything in Pro", "Dedicated support", "SLA guarantee", "Custom deployment"] }
+            ].map((p, i) => (
+              <div key={i} className={`pricing-card${p.featured ? " featured" : ""}`}>
+                <h3>{p.plan}</h3>
+                <p className="price">{p.price}<span>/mo</span></p>
+                <ul>{p.features.map((f, j) => <li key={j}>{f}</li>)}</ul>
+                <a href="#" className={`btn ${p.featured ? "btn-primary" : "btn-secondary"}`}>{p.plan === "Enterprise" ? "Contact Sales" : "Choose Plan"}</a>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+      <section id="testimonials" className="section">
+        <div className="container">
+          <h2>What Our Users Say</h2>
+          <div className="testimonial-grid">
+            {[{ text: "This platform transformed how our team ships features. Absolutely love it.", author: "Sarah K., CTO" },
+              { text: "The best investment we made this year. The performance gains are incredible.", author: "Michael R., Developer" }
+            ].map((t, i) => (
+              <div key={i} className="testimonial-card">
+                <p>"{t.text}"</p>
+                <span className="author">\u2014 {t.author}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+      <section id="cta" className="section">
+        <div className="container cta-content">
+          <h2>Ready to Get Started?</h2>
+          <p>Join thousands of teams already building with us.</p>
+          <a href="#" className="btn btn-primary btn-large">Start Free Trial</a>
+        </div>
+      </section>
+      <footer id="footer">
+        <div className="container footer-content">
+          <p>&copy; 2026 {{projectName}}. All rights reserved.</p>
+          <div className="footer-links">
+            <a href="#">Privacy</a>
+            <a href="#">Terms</a>
+            <a href="#">Contact</a>
+          </div>
+        </div>
+      </footer>
+    </ParticlesProvider>
+  );
+}

package/template/riot/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "riot": "^9.7.0",
+    "@tsparticles/engine": "^4.1.3",
+    "@tsparticles/slim": "^4.1.3",
+    "@tsparticles/configs": "^4.1.3",
+    "@tsparticles/riot": "^4.1.3"
+  },
+  "devDependencies": {
+    "@riotjs/vite-plugin": "^9.4.0",
+    "vite": "^6.0.0"
+  }
+}

package/template/riot/src/app.riot

@@ -0,0 +1,123 @@
+<app>
+  <link rel="stylesheet" href="./style.css">
+
+  <div>
+    <riot-particles id="tsparticles"></riot-particles>
+    <section id="hero" class="section">
+      <div class="hero-content">
+        <h1>Build Faster.<br /><span class="gradient-text">Go Further.</span></h1>
+        <p class="hero-subtitle">The platform that helps teams ship products at the speed of light.</p>
+        <div class="hero-cta">
+          <a href="#features" class="btn btn-primary">Learn More</a>
+          <a href="#cta" class="btn btn-secondary">Get Started</a>
+        </div>
+      </div>
+    </section>
+    <section id="features" class="section">
+      <div class="container">
+        <h2>Features</h2>
+        <div class="features-grid">
+          <div each="{ f in state.features }" class="feature-card">
+            <div class="feature-icon">{ f.icon }</div>
+            <h3>{ f.title }</h3>
+            <p>{ f.desc }</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="pricing" class="section">
+      <div class="container">
+        <h2>Pricing</h2>
+        <div class="pricing-grid">
+          <div each="{ p in state.pricingPlans }" class="pricing-card{ p.featured ? ' featured' : '' }">
+            <h3>{ p.plan }</h3>
+            <p class="price">{ p.price }<span>/mo</span></p>
+            <ul>
+              <li each="{ f in p.features }">{ f }</li>
+            </ul>
+            <a href="#" class="btn{ p.featured ? ' btn-primary' : ' btn-secondary' }">{ p.plan === 'Enterprise' ? 'Contact Sales' : 'Choose Plan' }</a>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="testimonials" class="section">
+      <div class="container">
+        <h2>What Our Users Say</h2>
+        <div class="testimonial-grid">
+          <div each="{ t in state.testimonials }" class="testimonial-card">
+            <p>"{ t.text }"</p>
+            <span class="author">— { t.author }</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="cta" class="section">
+      <div class="container cta-content">
+        <h2>Ready to Get Started?</h2>
+        <p>Join thousands of teams already building with us.</p>
+        <a href="#" class="btn btn-primary btn-large">Start Free Trial</a>
+      </div>
+    </section>
+    <footer id="footer">
+      <div class="container footer-content">
+        <p>&copy; 2026 {{projectName}}. All rights reserved.</p>
+        <div class="footer-links">
+          <a href="#">Privacy</a>
+          <a href="#">Terms</a>
+          <a href="#">Contact</a>
+        </div>
+      </div>
+    </footer>
+  </div>
+
+  <script>
+    import { loadSlim } from "@tsparticles/slim";
+    import { tsParticles } from "@tsparticles/engine";
+    import "@tsparticles/riot";
+
+    export default {
+      state: {
+        features: [
+          { icon: "⚡", title: "Blazing Fast", desc: "Optimized for performance from the ground up." },
+          { icon: "🔒", title: "Secure", desc: "Enterprise-grade security built into every layer." },
+          { icon: "🌍", title: "Global Scale", desc: "Deploy anywhere with our global infrastructure." },
+          { icon: "🎨", title: "Customizable", desc: "Tailor every aspect to your brand and needs." },
+        ],
+        pricingPlans: [
+          { plan: "Starter", price: "$9", features: ["Up to 5 projects", "Basic analytics", "Email support"], featured: false },
+          { plan: "Pro", price: "$29", features: ["Unlimited projects", "Advanced analytics", "Priority support", "Custom integrations"], featured: true },
+          { plan: "Enterprise", price: "$99", features: ["Everything in Pro", "Dedicated support", "SLA guarantee", "Custom deployment"], featured: false },
+        ],
+        testimonials: [
+          { text: "This platform transformed how our team ships features. Absolutely love it.", author: "Sarah K., CTO" },
+          { text: "The best investment we made this year. The performance gains are incredible.", author: "Michael R., Developer" },
+        ],
+      },
+      async onMounted() {
+        await loadSlim(tsParticles);
+        await tsParticles.load({
+          id: "tsparticles",
+          options: {
+            fullScreen: { enable: true, zIndex: -1 },
+            background: { color: { value: "#080818" } },
+            fpsLimit: 60,
+            particles: {
+              number: { value: 100, density: { enable: true } },
+              color: { value: ["#6c5ce7", "#00cec9", "#fd79a8", "#ffeaa7"] },
+              shape: { type: "circle" },
+              opacity: { value: 0.4, random: true },
+              size: { value: { min: 1, max: 4 }, random: true },
+              links: { enable: true, distance: 150, color: "#6c5ce7", opacity: 0.15, width: 1 },
+              move: { enable: true, speed: 1.5, direction: "none", random: true, straight: false, outModes: { default: "out" } },
+            },
+            interactivity: {
+              events: { onHover: { enable: true, mode: "grab" } },
+              modes: { grab: { distance: 200, links: { opacity: 0.5 } } },
+            },
+            detectRetina: true,
+          },
+        });
+      },
+    };
+  </script>
+</app>

package/template/solid/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "solid-js": "^1.8.11",
+    "@tsparticles/solid": "^4.1.3"
+  },
+  "devDependencies": {
+    "vite-plugin-solid": "^2.8.2"
+  }
+}

package/template/solid/src/App.tsx

@@ -0,0 +1,170 @@
+import { onMount } from "solid-js";
+import Particles, { initParticlesEngine } from "@tsparticles/solid";
+import { loadSlim } from "@tsparticles/slim";
+import type { ISourceOptions } from "@tsparticles/engine";
+
+export default function App() {
+  onMount(() => {
+    void initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    });
+  });
+
+  const options: ISourceOptions = {
+    fullScreen: { enable: true, zIndex: -1 },
+    background: { color: { value: "#080818" } },
+    fpsLimit: 60,
+    particles: {
+      number: { value: 100, density: { enable: true } },
+      color: { value: ["#6c5ce7", "#00cec9", "#fd79a8", "#ffeaa7"] },
+      shape: { type: "circle" },
+      opacity: { value: 0.4, random: true },
+      size: { value: { min: 1, max: 4 }, random: true },
+      links: {
+        enable: true,
+        distance: 150,
+        color: "#6c5ce7",
+        opacity: 0.15,
+        width: 1,
+      },
+      move: {
+        enable: true,
+        speed: 1.5,
+        direction: "none",
+        random: true,
+        straight: false,
+        outModes: { default: "out" },
+      },
+    },
+    interactivity: {
+      events: {
+        onHover: { enable: true, mode: "grab" },
+      },
+      modes: {
+        grab: { distance: 200, links: { opacity: 0.5 } },
+      },
+    },
+    detectRetina: true,
+  };
+
+  return (
+    <>
+      <div id="app-content">
+        <section id="hero" class="section">
+          <div class="hero-content">
+            <h1>Build Faster.<br /><span class="gradient-text">Go Further.</span></h1>
+            <p class="hero-subtitle">The platform that helps teams ship products at the speed of light.</p>
+            <div class="hero-cta">
+              <a href="#features" class="btn btn-primary">Learn More</a>
+              <a href="#cta" class="btn btn-secondary">Get Started</a>
+            </div>
+          </div>
+        </section>
+
+        <section id="features" class="section">
+          <div class="container">
+            <h2>Features</h2>
+            <div class="features-grid">
+              <div class="feature-card">
+                <div class="feature-icon">⚡</div>
+                <h3>Blazing Fast</h3>
+                <p>Optimized for performance from the ground up.</p>
+              </div>
+              <div class="feature-card">
+                <div class="feature-icon">🔒</div>
+                <h3>Secure</h3>
+                <p>Enterprise-grade security built into every layer.</p>
+              </div>
+              <div class="feature-card">
+                <div class="feature-icon">🌍</div>
+                <h3>Global Scale</h3>
+                <p>Deploy anywhere with our global infrastructure.</p>
+              </div>
+              <div class="feature-card">
+                <div class="feature-icon">🎨</div>
+                <h3>Customizable</h3>
+                <p>Tailor every aspect to your brand and needs.</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section id="pricing" class="section">
+          <div class="container">
+            <h2>Pricing</h2>
+            <div class="pricing-grid">
+              <div class="pricing-card">
+                <h3>Starter</h3>
+                <p class="price">$9<span>/mo</span></p>
+                <ul>
+                  <li>Up to 5 projects</li>
+                  <li>Basic analytics</li>
+                  <li>Email support</li>
+                </ul>
+                <a href="#" class="btn btn-secondary">Choose Plan</a>
+              </div>
+              <div class="pricing-card featured">
+                <h3>Pro</h3>
+                <p class="price">$29<span>/mo</span></p>
+                <ul>
+                  <li>Unlimited projects</li>
+                  <li>Advanced analytics</li>
+                  <li>Priority support</li>
+                  <li>Custom integrations</li>
+                </ul>
+                <a href="#" class="btn btn-primary">Choose Plan</a>
+              </div>
+              <div class="pricing-card">
+                <h3>Enterprise</h3>
+                <p class="price">$99<span>/mo</span></p>
+                <ul>
+                  <li>Everything in Pro</li>
+                  <li>Dedicated support</li>
+                  <li>SLA guarantee</li>
+                  <li>Custom deployment</li>
+                </ul>
+                <a href="#" class="btn btn-secondary">Contact Sales</a>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section id="testimonials" class="section">
+          <div class="container">
+            <h2>What Our Users Say</h2>
+            <div class="testimonial-grid">
+              <div class="testimonial-card">
+                <p>"This platform transformed how our team ships features. Absolutely love it."</p>
+                <span class="author">— Sarah K., CTO</span>
+              </div>
+              <div class="testimonial-card">
+                <p>"The best investment we made this year. The performance gains are incredible."</p>
+                <span class="author">— Michael R., Developer</span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section id="cta" class="section">
+          <div class="container cta-content">
+            <h2>Ready to Get Started?</h2>
+            <p>Join thousands of teams already building with us.</p>
+            <a href="#" class="btn btn-primary btn-large">Start Free Trial</a>
+          </div>
+        </section>
+
+        <footer id="footer">
+          <div class="container footer-content">
+            <p>&copy; 2026 {{projectName}}. All rights reserved.</p>
+            <div class="footer-links">
+              <a href="#">Privacy</a>
+              <a href="#">Terms</a>
+              <a href="#">Contact</a>
+            </div>
+          </div>
+        </footer>
+      </div>
+      <Particles id="tsparticles" options={options} />
+    </>
+  );
+}