Skip to content

Latest commit

 

History

History
259 lines (237 loc) · 5.8 KB

examples.md

File metadata and controls

259 lines (237 loc) · 5.8 KB

🎆 Example Configurations

Starry Night

const userOptions = {
  numberOfStars: 500,
  maxDistance: 80,
  starSize: { min: 1, max: 3 },
  speedFactor: 1,
  mouseRadius: 200,
  starColor: "#fff",
  connectionColor: "rgba(255, 255, 255, 0.4)",
  canvasBackgroundColor: "#000",
  lineThickness: 0.5,
  starShapes: ["circle"],
  randomStarSpeeds: true,
  rotationSpeed: { min: 0.001, max: 0.003 },
  connectionsWhenNoMouse: true,
  percentStarsConnecting: 15,
  connectionLinesDashed: false,
  canvasGradient: null,
  starDensity: "medium",
  interactive: true,
};

Nebula Burst

const userOptions = {
  numberOfStars: 200,
  maxDistance: 50,
  starSize: { min: 2, max: 5 },
  speedFactor: 1.5,
  mouseRadius: 150,
  starColor: "#FF6E6E",
  connectionColor: "rgba(255, 110, 110, 0.6)",
  canvasBackgroundColor: "#260C1A",
  lineThickness: 1,
  starShapes: ["circle"],
  randomStarSpeeds: true,
  rotationSpeed: { min: 0.001, max: 0.003 },
  connectionsWhenNoMouse: false,
  percentStarsConnecting: 10,
  connectionLinesDashed: false,
  canvasGradient: null,
  starDensity: "medium",
  interactive: false,
};

Cosmic Web

const userOptions = {
  numberOfStars: 700,
  maxDistance: 100,
  starSize: { min: 1, max: 3 },
  speedFactor: 0.8,
  mouseRadius: 250,
  starColor: "#A0ECFF",
  connectionColor: "rgba(160, 236, 255, 0.4)",
  canvasBackgroundColor: "#022C43",
  lineThickness: 1,
  starShapes: ["circle", "star"],
  randomStarSpeeds: true,
  rotationSpeed: { min: 0.001, max: 0.003 },
  connectionsWhenNoMouse: true,
  percentStarsConnecting: 20,
  connectionLinesDashed: true,
  dashedLinesConfig: [5, 15],
  canvasGradient: null,
  starDensity: "high",
  interactive: true,
};

Galactic Symphony

const userOptions = {
  numberOfStars: 500,
  maxDistance: 100,
  starSize: { min: 2, max: 6 },
  speedFactor: 1,
  mouseRadius: 200,
  starColor: "#F2A365",
  connectionColor: "rgba(242, 163, 101, 0.6)",
  canvasBackgroundColor: "#000",
  lineThickness: 1,
  starShapes: ["star"],
  randomStarSpeeds: true,
  rotationSpeed: { min: 0.001, max: 0.003 },
  connectionsWhenNoMouse: false,
  percentStarsConnecting: 10,
  connectionLinesDashed: true,
  dashedLinesConfig: [10, 20],
  canvasGradient: ["#3A1C71", "#D76D77", "#FFAF7B"],
  starDensity: "medium",
  interactive: false,
};

Celestial Dream

const userOptions = {
  numberOfStars: 400,
  maxDistance: 80,
  starSize: { min: 1, max: 4 },
  speedFactor: 0.8,
  mouseRadius: 200,
  starColor: "#C3A6FF",
  connectionColor: "rgba(195, 166, 255, 0.5)",
  canvasBackgroundColor: "#1B1A2F",
  lineThickness: 1,
  starShapes: ["circle", "star"],
  randomStarSpeeds: true,
  rotationSpeed: { min: 0.001, max: 0.003 },
  connectionsWhenNoMouse: true,
  percentStarsConnecting: 15,
  connectionLinesDashed: false,
  canvasGradient: null,
  starDensity: "medium",
  interactive: true,
};

Quantum Realm

const userOptions = {
  numberOfStars: 800,
  maxDistance: 70,
  starSize: { min: 1, max: 3 },
  speedFactor: 1.2,
  mouseRadius: 150,
  starColor: "#FFC75F",
  connectionColor: "rgba(255, 199, 95, 0.5)",
  canvasBackgroundColor: "#1D2731",
  lineThickness: 1,
  starShapes: ["circle"],
  randomStarSpeeds: true,
  rotationSpeed: { min: 0.001, max: 0.003 },
  connectionsWhenNoMouse: true,
  percentStarsConnecting: 20,
  connectionLinesDashed: true,
  dashedLinesConfig: [5, 10],
  canvasGradient: null,
  starDensity: "ultra",
  interactive: false,
};

Eternal Twilight

const userOptions = {
  numberOfStars: 300,
  maxDistance: 80,
  starSize: { min: 2, max: 6 },
  speedFactor: 0.7,
  mouseRadius: 200,
  starColor: "#B8B8D1",
  connectionColor: "rgba(184, 184, 209, 0.5)",
  canvasBackgroundColor: "#392F5A",
  lineThickness: 1.5,
  starShapes: ["star"],
  randomStarSpeeds: true,
  rotationSpeed: { min: 0.001, max: 0.003 },
  connectionsWhenNoMouse: false,
  percentStarsConnecting: 10,
  connectionLinesDashed: false,
  canvasGradient: ["#4568DC", "#B06AB3"],
  starDensity: "low",
  interactive: false,
};

Alien Encounter

const userOptions = {
  numberOfStars: 600,
  maxDistance: 90,
  starSize: { min: 1, max: 4 },
  speedFactor: 1,
  mouseRadius: 250,
  starColor: "#72EFB3",
  connectionColor: "rgba(114, 239, 179, 0.6)",
  canvasBackgroundColor: "#131216",
  lineThickness: 1,
  starShapes: ["circle", "star"],
  randomStarSpeeds: true,
  rotationSpeed: { min: 0.001, max: 0.003 },
  connectionsWhenNoMouse: true,
  percentStarsConnecting: 15,
  connectionLinesDashed: true

,
  dashedLinesConfig: [5, 15],
  canvasGradient: null,
  starDensity: "high",
  interactive: true,
};

Cybernetic Circuit

const userOptions = {
  numberOfStars: 500,
  maxDistance: 70,
  starSize: { min: 1, max: 3 },
  speedFactor: 1.5,
  mouseRadius: 150,
  starColor: "#32CDFF",
  connectionColor: "rgba(50, 205, 255, 0.5)",
  canvasBackgroundColor: "#0F0C29",
  lineThickness: 1,
  starShapes: ["star"],
  randomStarSpeeds: true,
  rotationSpeed: { min: 0.001, max: 0.003 },
  connectionsWhenNoMouse: false,
  percentStarsConnecting: 10,
  connectionLinesDashed: true,
  dashedLinesConfig: [10, 20],
  canvasGradient: ["#12c2e9", "#c471ed", "#f64f59"],
  starDensity: "medium",
  interactive: false,
};

Astral Serenity

const userOptions = {
  numberOfStars: 400,
  maxDistance: 60,
  starSize: { min: 2, max: 4 },
  speedFactor: 0.6,
  mouseRadius: 200,
  starColor: "#FAFAFA",
  connectionColor: "rgba(250, 250, 250, 0.6)",
  canvasBackgroundColor: "#1F2041",
  lineThickness: 1,
  starShapes: ["circle"],
  randomStarSpeeds: true,
  rotationSpeed: { min: 0.001, max: 0.003 },
  connectionsWhenNoMouse: true,
  percentStarsConnecting: 15,
  connectionLinesDashed: false,
  canvasGradient: ["#1f2041", "#4b6cb7", "#182848"],
  starDensity: "medium",
  interactive: true,
};