Skip to content

Commit e24dcf6

Browse files
NiekesNiekes
committed
Adjust speed in star trail examples, fix source code links
1 parent 842e67d commit e24dcf6

2 files changed

Lines changed: 52 additions & 45 deletions

File tree

‎README.md‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -43,40 +43,47 @@ The best way to explore all the possibilities, interactive controls, and propert
4343

4444
---
4545

46-
### [Digital Rain](https://github.com/niekes/beautiful-backgrounds/blob/main/src/stories/digitalRain.ts)
46+
### [Ambient Ribbon](https://github.com/niekes/beautiful-backgrounds/blob/main/src/components/ambientRibbon.ts)
47+
48+
A beautiful, flowing animation of multiple ribbons with deep control over wave physics, rotation, and color transitions. Perfect for high-end, elegant design themes.
49+
50+
- 📖 [View in Storybook](https://niekes.github.io/beautiful-backgrounds/?path=/story/backgrounds-ambient-ribbon--signature-flow)
51+
- 🔗 [Source Code](https://github.com/niekes/beautiful-backgrounds/blob/main/src/components/ambientRibbon.ts)
52+
53+
### [Digital Rain](https://github.com/niekes/beautiful-backgrounds/blob/main/src/components/digitalRain.ts)
4754

4855
A classic matrix-style falling character effect. Highly customizable with character sets, font sizes, speeds, and complex color gradients. Perfect for a retro-hacker or high-tech aesthetic.
4956

50-
- 📖 [View in Storybook](https://niekes.github.io/beautiful-backgrounds/?path=/story/backgrounds-digital-rain--default)
51-
- 🔗 [Source Code](https://github.com/niekes/beautiful-backgrounds/blob/main/src/stories/digitalRain.ts)
57+
- 📖 [View in Storybook](https://niekes.github.io/beautiful-backgrounds/?path=/story/backgrounds-digital-rain--classic-matrix-rain)
58+
- 🔗 [Source Code](https://github.com/niekes/beautiful-backgrounds/blob/main/src/components/digitalRain.ts)
5259

53-
### [Hexagon Wave](https://github.com/niekes/beautiful-backgrounds/blob/main/src/stories/hexagonWave.ts)
60+
### [Hexagon Wave](https://github.com/niekes/beautiful-backgrounds/blob/main/src/components/hexagonWave.ts)
5461

5562
A sleek, organic waving grid of hexagons (or other polygons). It features dynamic shading, lightness boosts, and wave physics that create a premium, rhythmic motion across the screen.
5663

57-
- 📖 [View in Storybook](https://niekes.github.io/beautiful-backgrounds/?path=/story/backgrounds-hexagonwave--default)
58-
- 🔗 [Source Code](https://github.com/niekes/beautiful-backgrounds/blob/main/src/stories/hexagonWave.ts)
64+
- 📖 [View in Storybook](https://niekes.github.io/beautiful-backgrounds/?path=/story/backgrounds-hexagon-wave--honeycomb-pulsar)
65+
- 🔗 [Source Code](https://github.com/niekes/beautiful-backgrounds/blob/main/src/components/hexagonWave.ts)
5966

60-
### [Liquid Lines](https://github.com/niekes/beautiful-backgrounds/blob/main/src/stories/liquidLines.ts)
67+
### [Liquid Lines](https://github.com/niekes/beautiful-backgrounds/blob/main/src/components/liquidLines.ts)
6168

6269
A fluid, undulating animation of multiple lines with gradients and 3D depth effects. It offers extensive control over wave physics, line thickness, and color transitions, making it perfect for organic or "liquid" design themes.
6370

64-
- 📖 [View in Storybook](https://niekes.github.io/beautiful-backgrounds/?path=/story/backgrounds-liquidlines--default)
65-
- 🔗 [Source Code](https://github.com/niekes/beautiful-backgrounds/blob/main/src/stories/liquidLines.ts)
71+
- 📖 [View in Storybook](https://niekes.github.io/beautiful-backgrounds/?path=/story/backgrounds-liquid-lines--serpentine-flow)
72+
- 🔗 [Source Code](https://github.com/niekes/beautiful-backgrounds/blob/main/src/components/liquidLines.ts)
6673

67-
### [Neon Rails](https://github.com/niekes/beautiful-backgrounds/blob/main/src/stories/neonRails.ts)
74+
### [Neon Rails](https://github.com/niekes/beautiful-backgrounds/blob/main/src/components/neonRails.ts)
6875

6976
Fast-moving particles that follow a geometric grid, creating long neon trails. It's ideal for "electric" or "cyberpunk" themes, offering deep control over particle lifespan, grid geometry, and trail opacity.
7077

71-
- 📖 [View in Storybook](https://niekes.github.io/beautiful-backgrounds/?path=/story/backgrounds-neon-rails--default)
72-
- 🔗 [Source Code](https://github.com/niekes/beautiful-backgrounds/blob/main/src/stories/neonRails.ts)
78+
- 📖 [View in Storybook](https://niekes.github.io/beautiful-backgrounds/?path=/story/backgrounds-neon-rails--cyber-grid-network)
79+
- 🔗 [Source Code](https://github.com/niekes/beautiful-backgrounds/blob/main/src/components/neonRails.ts)
7380

74-
### [Star Trail](https://github.com/niekes/beautiful-backgrounds/blob/main/src/stories/startTrail.ts)
81+
### [Star Trail](https://github.com/niekes/beautiful-backgrounds/blob/main/src/components/startTrail.ts)
7582

7683
A beautiful celestial animation featuring orbiting stars with fading trails. You can adjust orbit radii, star sizes, and colors to create anything from a subtle night sky to a vibrant cosmic nebula.
7784

78-
- 📖 [View in Storybook](https://niekes.github.io/beautiful-backgrounds/?path=/story/backgrounds-star-trail--default)
79-
- 🔗 [Source Code](https://github.com/niekes/beautiful-backgrounds/blob/main/src/stories/startTrail.ts)
85+
- 📖 [View in Storybook](https://niekes.github.io/beautiful-backgrounds/?path=/story/backgrounds-star-trail--galactic-vortex)
86+
- 🔗 [Source Code](https://github.com/niekes/beautiful-backgrounds/blob/main/src/components/startTrail.ts)
8087

8188
<!-- Links -->
8289

‎src/stories/StartTrail.stories.ts‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@ const meta: Meta = {
3939
control: { type: "range", min: 0.1, max: 10, step: 0.1 },
4040
},
4141
particleSpeedMin: {
42-
control: { type: "range", min: -10, max: 10, step: 0.1 },
42+
control: { type: "range", min: -5, max: 5, step: 0.01 },
4343
},
4444
particleSpeedMax: {
45-
control: { type: "range", min: -10, max: 10, step: 0.1 },
45+
control: { type: "range", min: -5, max: 5, step: 0.01 },
4646
},
4747
particleColorHueStart: { control: { type: "range", min: 0, max: 360 } },
4848
particleColorHueEnd: { control: { type: "range", min: 0, max: 360 } },
@@ -90,8 +90,8 @@ const meta: Meta = {
9090
particleLifespanMax: 10000,
9191
particleSizeMin: 0.5,
9292
particleSizeMax: 1.5,
93-
particleSpeedMin: 0.5,
94-
particleSpeedMax: 2.0,
93+
particleSpeedMin: 0.1,
94+
particleSpeedMax: 0.2,
9595
trailOpacity: 0.1,
9696
particleColors: "",
9797
},
@@ -117,14 +117,14 @@ export const Messiere: Story = {
117117
particleForce: 23,
118118
particleLifespanMin: 5000,
119119
particleLifespanMax: 20000,
120-
trailOpacity: 0.03,
120+
trailOpacity: 0.071,
121121
},
122122
};
123123

124124
export const PartyLights: Story = {
125125
args: {
126-
particleSpeedMin: -0.1,
127-
particleSpeedMax: 0.1,
126+
particleSpeedMin: -0.01,
127+
particleSpeedMax: 0.01,
128128
particleColorLightnessStart: 70,
129129
particleColorLightnessEnd: 90,
130130
particleAmount: 1000,
@@ -147,8 +147,8 @@ export const BlueFireFlies: Story = {
147147
particleLifespanMin: 100,
148148
particleSizeMax: 0.8,
149149
particleSizeMin: 0.2,
150-
particleSpeedMax: 0.1,
151-
particleSpeedMin: -0.1,
150+
particleSpeedMax: 0.01,
151+
particleSpeedMin: -0.01,
152152
},
153153
};
154154

@@ -168,8 +168,8 @@ export const CyanRing: Story = {
168168
particleRadiusMin: 153,
169169
particleSizeMax: 0.8,
170170
particleSizeMin: 0.2,
171-
particleSpeedMax: 1,
172-
particleSpeedMin: -1,
171+
particleSpeedMax: 0.1,
172+
particleSpeedMin: -0.1,
173173
},
174174
};
175175

@@ -187,8 +187,8 @@ export const GravitationalCollapse: Story = {
187187
particleLifespanMax: 2600,
188188
particleSizeMin: 0.5,
189189
particleSizeMax: 2.5,
190-
particleSpeedMin: -2,
191-
particleSpeedMax: -0.7,
190+
particleSpeedMin: -0.21,
191+
particleSpeedMax: -0.14,
192192
trailOpacity: 0.275,
193193
particleColors: null,
194194
particleForce: -31.8,
@@ -216,12 +216,12 @@ export const GoldenNebula: Story = {
216216
particleAmount: 3000,
217217
particleSizeMin: 0.3,
218218
particleSizeMax: 2.0,
219-
particleSpeedMin: -0.5,
220-
particleSpeedMax: 0.5,
219+
particleSpeedMin: -0.1,
220+
particleSpeedMax: 0.1,
221221
particleForce: 15,
222222
particleLifespanMin: 8000,
223223
particleLifespanMax: 15000,
224-
trailOpacity: 0.05,
224+
trailOpacity: 0.31,
225225
},
226226
};
227227

@@ -255,8 +255,8 @@ export const CosmicDust: Story = {
255255
particleAmount: 6000,
256256
particleSizeMin: 0.1,
257257
particleSizeMax: 0.8,
258-
particleSpeedMin: 0.2,
259-
particleSpeedMax: 1.5,
258+
particleSpeedMin: 0.04,
259+
particleSpeedMax: 0.03,
260260
particleForce: -5,
261261
particleLifespanMin: 3000,
262262
particleLifespanMax: 12000,
@@ -278,7 +278,7 @@ export const FireflyForest: Story = {
278278
particleLifespanMax: 2000,
279279
particleRadiusMin: 20,
280280
particleRadiusMax: 400,
281-
trailOpacity: 0.15,
281+
trailOpacity: 0.217,
282282
},
283283
};
284284

@@ -289,14 +289,14 @@ export const NeonVortex: Story = {
289289
particleAmount: 3500,
290290
particleSizeMin: 0.8,
291291
particleSizeMax: 2.5,
292-
particleSpeedMin: 2.0,
293-
particleSpeedMax: 5.0,
292+
particleSpeedMin: 0.1,
293+
particleSpeedMax: 0.2,
294294
particleForce: 40,
295295
particleLifespanMin: 2000,
296296
particleLifespanMax: 8000,
297297
particleRadiusMin: 100,
298298
particleRadiusMax: 350,
299-
trailOpacity: 0.04,
299+
trailOpacity: 0.075,
300300
},
301301
};
302302

@@ -312,8 +312,8 @@ export const StarfieldWarp: Story = {
312312
particleAmount: 2000,
313313
particleSizeMin: 0.5,
314314
particleSizeMax: 3.0,
315-
particleSpeedMin: 5.0,
316-
particleSpeedMax: 10.0,
315+
particleSpeedMin: -0.5,
316+
particleSpeedMax: -0.25,
317317
particleForce: -50,
318318
particleLifespanMin: 500,
319319
particleLifespanMax: 2000,
@@ -328,8 +328,8 @@ export const TwilightSparkle: Story = {
328328
particleAmount: 1500,
329329
particleSizeMin: 1.0,
330330
particleSizeMax: 3.0,
331-
particleSpeedMin: -0.8,
332-
particleSpeedMax: 0.8,
331+
particleSpeedMin: -0.01,
332+
particleSpeedMax: 0.01,
333333
particleForce: 12,
334334
particleLifespanMin: 4000,
335335
particleLifespanMax: 12000,
@@ -351,11 +351,11 @@ export const RainbowBurst: Story = {
351351
particleAmount: 4500,
352352
particleSizeMin: 0.5,
353353
particleSizeMax: 2.0,
354-
particleSpeedMin: -3.0,
355-
particleSpeedMax: 3.0,
354+
particleSpeedMin: -0.03,
355+
particleSpeedMax: -0.02,
356356
particleForce: -25,
357-
particleLifespanMin: 1000,
358-
particleLifespanMax: 5000,
357+
particleLifespanMin: 500,
358+
particleLifespanMax: 900,
359359
particleRadiusMin: 1,
360360
particleRadiusMax: 150,
361361
trailOpacity: 0.1,

0 commit comments

Comments
 (0)