Skip to content

Commit 19e8be9

Browse files
authored
Merge pull request #63 from Gazoon007/feat/light-rays
Create <LightRays /> background
2 parents 6d99101 + bdee472 commit 19e8be9

File tree

5 files changed

+796
-0
lines changed

5 files changed

+796
-0
lines changed

src/constants/Categories.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ export const CATEGORIES = [
114114
'Liquid Chrome',
115115
'Grid Distortion',
116116
'Galaxy',
117+
'Light Rays',
117118
]
118119
}
119120
];

src/constants/Components.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ const backgrounds = {
100100
'ripple-grid': () => import('../demo/Backgrounds/RippleGridDemo.vue'),
101101
'galaxy': () => import('../demo/Backgrounds/GalaxyDemo.vue'),
102102
'faulty-terminal': () => import('../demo/Backgrounds/FaultyTerminalDemo.vue'),
103+
'light-rays': () => import('../demo/Backgrounds/LightRaysDemo.vue'),
103104
};
104105

105106
export const componentMap = {
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import code from '@content/Backgrounds/LightRays/LightRays.vue?raw';
2+
import { createCodeObject } from '@/types/code';
3+
4+
export const lightRays = createCodeObject(code, 'Backgrounds/LightRays', {
5+
installation: `npm install ogl`,
6+
usage: `<template>
7+
<div class="w-full h-[600px] relative">
8+
<LightRays
9+
rays-origin="top-center"
10+
rays-color="#00ffff"
11+
:rays-speed="1.5"
12+
:light-spread="0.8"
13+
:ray-length="1.2"
14+
:follow-mouse="true"
15+
:mouse-influence="0.1"
16+
:noise-amount="0.1"
17+
:distortion="0.05"
18+
class-name="custom-rays"
19+
/>
20+
</div>
21+
</template>
22+
23+
<script setup lang="ts">
24+
import LightRays from "./LightRays.vue";
25+
</script>`
26+
});

0 commit comments

Comments
 (0)