Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 20855de

Browse files
DavidHDevDavidHDev
authored
Merge branch 'main' into feat/fuzzy-text
2 parents 7d728f2 + d57f4f4 commit 20855de

16 files changed

Lines changed: 2162 additions & 3 deletions

‎src/lib/components/docs/pages/ASCIITextDemo.svelte‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<script lang="ts">
2+
import Customize from "$lib/components/docs/preview/Customize.svelte";
3+
import DemoCodeTab from "$lib/components/docs/preview/DemoCodeTab.svelte";
4+
import PreviewInput from "$lib/components/docs/preview/PreviewInput.svelte";
5+
import PreviewSlider from "$lib/components/docs/preview/PreviewSlider.svelte";
6+
import PreviewSwitch from "$lib/components/docs/preview/PreviewSwitch.svelte";
7+
import PropTable, {
8+
type PropRow,
9+
} from "$lib/components/docs/preview/PropTable.svelte";
10+
import ReplayButton from "$lib/components/docs/preview/ReplayButton.svelte";
11+
import TabsLayout from "$lib/components/docs/preview/TabsLayout.svelte";
12+
import ASCIIText from "$lib/components/library/TextAnimations/ASCIIText/ASCIIText.svelte";
13+
import source from "$lib/components/library/TextAnimations/ASCIIText/ASCIIText.svelte?raw";
14+
15+
const DEFAULTS = {
16+
text: "Hey!",
17+
enableWaves: true,
18+
asciiFontSize: 8,
19+
};
20+
21+
let text = $state(DEFAULTS.text);
22+
let enableWaves = $state(DEFAULTS.enableWaves);
23+
let asciiFontSize = $state(DEFAULTS.asciiFontSize);
24+
25+
let replay = $state(0);
26+
27+
const hasChanges = $derived(
28+
text !== DEFAULTS.text ||
29+
enableWaves !== DEFAULTS.enableWaves ||
30+
asciiFontSize !== DEFAULTS.asciiFontSize,
31+
);
32+
33+
function reset() {
34+
text = DEFAULTS.text;
35+
enableWaves = DEFAULTS.enableWaves;
36+
asciiFontSize = DEFAULTS.asciiFontSize;
37+
replay++;
38+
}
39+
40+
const scriptOpen = "<" + 'script lang="ts">';
41+
const scriptClose = "</" + "script>";
42+
43+
const usage = $derived(`${scriptOpen}
44+
import AnimatedContent from '$lib/components/AnimatedContent.svelte';
45+
${scriptClose}
46+
47+
<ASCIIText
48+
text="${text}"
49+
enableWaves={${enableWaves}}
50+
asciiFontSize={${asciiFontSize}}
51+
/>`);
52+
53+
const props: PropRow[] = [
54+
{
55+
name: "text",
56+
type: "string",
57+
default: '"Hello World!"',
58+
description: "The text displayed on the plane in the ASCII scene.",
59+
},
60+
{
61+
name: "enableWaves",
62+
type: "boolean",
63+
default: "true",
64+
description: "If false, disables the wavy text animation.",
65+
},
66+
{
67+
name: "asciiFontSize",
68+
type: "number",
69+
default: "12",
70+
description: "Size of the ASCII glyphs in the overlay.",
71+
},
72+
{
73+
name: "textFontSize",
74+
type: "number",
75+
default: "200",
76+
description:
77+
"Pixel size for the text that's drawn onto the plane texture.",
78+
},
79+
{
80+
name: "planeBaseHeight",
81+
type: "number",
82+
default: "8",
83+
description:
84+
"How tall the plane is in 3D. The plane width is auto-based on text aspect.",
85+
},
86+
{
87+
name: "textColor",
88+
type: "string",
89+
default: "#FF8A4C",
90+
description: "The color of the text drawn onto the plane texture.",
91+
},
92+
{
93+
name: "strokeColor",
94+
type: "string",
95+
default: "N/A",
96+
description:
97+
"Not used here, but you could add it if you want an outline effect.",
98+
},
99+
];
100+
</script>
101+
102+
<svelte:head><title>ASCII Text - svelte-bits</title></svelte:head>
103+
104+
<h1 class="sub-category">ASCII Text</h1>
105+
106+
<TabsLayout
107+
onreset={reset}
108+
{hasChanges}
109+
componentName="ASCIIText"
110+
{usage}
111+
{source}
112+
{props}
113+
>
114+
{#snippet preview()}
115+
<div
116+
class="relative flex justify-center items-center w-full min-h-100 overflow-hidden demo-container"
117+
>
118+
<ReplayButton onClick={() => replay++} />
119+
{#key replay}
120+
<ASCIIText {text} {enableWaves} {asciiFontSize} />
121+
{/key}
122+
</div>
123+
{/snippet}
124+
{#snippet code()}
125+
<DemoCodeTab slug="ascii-text" {usage} {source} />
126+
{/snippet}
127+
{#snippet customize()}
128+
<Customize>
129+
<PreviewInput
130+
title="Text"
131+
value={text}
132+
placeholder="Enter text..."
133+
onChange={(val) => (text = val)}
134+
/>
135+
<PreviewSlider
136+
title="Size"
137+
min={1}
138+
max={64}
139+
step={1}
140+
value={asciiFontSize}
141+
onChange={(val) => (asciiFontSize = val)}
142+
/>
143+
<PreviewSwitch
144+
title="Waves"
145+
checked={enableWaves}
146+
onChange={(checked) => (enableWaves = checked)}
147+
/>
148+
</Customize>
149+
{/snippet}
150+
{#snippet propTable()}
151+
<PropTable rows={props} />
152+
{/snippet}
153+
</TabsLayout>

‎src/lib/components/docs/pages/DecryptedTextDemo.svelte‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
<script lang="ts">
2+
import TabsLayout from '$lib/components/docs/preview/TabsLayout.svelte';
3+
import Customize from '$lib/components/docs/preview/Customize.svelte';
4+
import PreviewSlider from '$lib/components/docs/preview/PreviewSlider.svelte';
5+
import PreviewSwitch from '$lib/components/docs/preview/PreviewSwitch.svelte';
6+
import PreviewSelect from '$lib/components/docs/preview/PreviewSelect.svelte';
7+
import PropTable, { type PropRow } from '$lib/components/docs/preview/PropTable.svelte';
8+
import DemoCodeTab from '$lib/components/docs/preview/DemoCodeTab.svelte';
9+
import ReplayButton from '$lib/components/docs/preview/ReplayButton.svelte';
10+
import DecryptedText from '$lib/components/library/TextAnimations/DecryptedText/DecryptedText.svelte';
11+
import source from '$lib/components/library/TextAnimations/DecryptedText/DecryptedText.svelte?raw';
12+
13+
const DEFAULTS = {
14+
speed: 60,
15+
maxIterations: 10,
16+
sequential: true,
17+
useOriginalCharsOnly: false,
18+
revealDirection: 'start' as 'start' | 'end' | 'center',
19+
animateOn: 'view' as 'view' | 'hover' | 'inViewHover' | 'click',
20+
clickMode: 'once' as 'once' | 'toggle'
21+
};
22+
23+
let speed = $state(DEFAULTS.speed);
24+
let maxIterations = $state(DEFAULTS.maxIterations);
25+
let sequential = $state(DEFAULTS.sequential);
26+
let useOriginalCharsOnly = $state(DEFAULTS.useOriginalCharsOnly);
27+
let revealDirection = $state<'start' | 'end' | 'center'>(DEFAULTS.revealDirection);
28+
let animateOn = $state<'view' | 'hover' | 'inViewHover' | 'click'>(DEFAULTS.animateOn);
29+
let clickMode = $state<'once' | 'toggle'>(DEFAULTS.clickMode);
30+
let replay = $state(0);
31+
32+
const hasChanges = $derived(
33+
speed !== DEFAULTS.speed ||
34+
maxIterations !== DEFAULTS.maxIterations ||
35+
sequential !== DEFAULTS.sequential ||
36+
useOriginalCharsOnly !== DEFAULTS.useOriginalCharsOnly ||
37+
revealDirection !== DEFAULTS.revealDirection ||
38+
animateOn !== DEFAULTS.animateOn ||
39+
clickMode !== DEFAULTS.clickMode
40+
);
41+
42+
function reset() {
43+
speed = DEFAULTS.speed;
44+
maxIterations = DEFAULTS.maxIterations;
45+
sequential = DEFAULTS.sequential;
46+
useOriginalCharsOnly = DEFAULTS.useOriginalCharsOnly;
47+
revealDirection = DEFAULTS.revealDirection;
48+
animateOn = DEFAULTS.animateOn;
49+
clickMode = DEFAULTS.clickMode;
50+
replay++;
51+
}
52+
53+
const usage = $derived(`<DecryptedText
54+
text="Hacking into the mainframe..."
55+
speed={${speed}}
56+
maxIterations={${maxIterations}}
57+
sequential={${sequential}}
58+
revealDirection="${revealDirection}"
59+
useOriginalCharsOnly={${useOriginalCharsOnly}}
60+
animateOn="${animateOn}"
61+
clickMode="${clickMode}"
62+
/>`);
63+
64+
const props: PropRow[] = [
65+
{ name: 'text', type: 'string', default: '""', description: 'The text content to decrypt.' },
66+
{ name: 'speed', type: 'number', default: '50', description: 'Time in ms between each iteration.' },
67+
{ name: 'maxIterations', type: 'number', default: '10', description: 'Max number of random iterations (non-sequential mode).' },
68+
{ name: 'sequential', type: 'boolean', default: 'false', description: 'Whether to reveal one character at a time in sequence.' },
69+
{ name: 'revealDirection', type: '"start" | "end" | "center"', default: '"start"', description: 'From which position characters begin to reveal in sequential mode.' },
70+
{ name: 'useOriginalCharsOnly', type: 'boolean', default: 'false', description: 'Restrict scrambling to only the characters already in the text.' },
71+
{ name: 'class', type: 'string', default: '""', description: 'CSS class for revealed characters.' },
72+
{ name: 'parentClassName', type: 'string', default: '""', description: 'CSS class for the main characters container.' },
73+
{ name: 'encryptedClassName', type: 'string', default: '""', description: 'CSS class for encrypted characters.' },
74+
{ name: 'animateOn', type: '"view" | "hover" | "inViewHover" | "click"', default: '"hover"', description: 'Trigger scrambling on hover, scroll-into-view, or click.' },
75+
{ name: 'clickMode', type: '"once" | "toggle"', default: '"once"', description: 'Click behavior; only applies when animateOn is "click".' }
76+
];
77+
78+
const animateOptions = [
79+
{ value: 'view', label: 'View' },
80+
{ value: 'hover', label: 'Hover' },
81+
{ value: 'inViewHover', label: 'View & Hover' },
82+
{ value: 'click', label: 'Click' }
83+
];
84+
const clickOptions = [
85+
{ value: 'once', label: 'Once' },
86+
{ value: 'toggle', label: 'Toggle' }
87+
];
88+
const directionOptions = [
89+
{ value: 'start', label: 'Start' },
90+
{ value: 'end', label: 'End' },
91+
{ value: 'center', label: 'Center' }
92+
];
93+
</script>
94+
95+
<svelte:head><title>Decrypted Text - svelte-bits</title></svelte:head>
96+
97+
<h1 class="sub-category">Decrypted Text</h1>
98+
99+
<TabsLayout onreset={reset} {hasChanges} componentName="DecryptedText" {usage} {source} {props}>
100+
{#snippet preview()}
101+
<div
102+
class="demo-container relative w-full overflow-hidden"
103+
style="height:400px;display:flex;align-items:center;justify-content:center;font-size:clamp(1.25rem, 3vw, 2.5rem);font-weight:600;"
104+
>
105+
<ReplayButton onClick={() => replay++} />
106+
{#key replay}
107+
<DecryptedText
108+
text="Hacking into the mainframe..."
109+
{speed}
110+
{maxIterations}
111+
{sequential}
112+
{revealDirection}
113+
{useOriginalCharsOnly}
114+
{animateOn}
115+
{clickMode}
116+
/>
117+
{/key}
118+
</div>
119+
{/snippet}
120+
{#snippet code()}
121+
<DemoCodeTab slug="decrypted-text" {usage} {source} />
122+
{/snippet}
123+
{#snippet customize()}
124+
<Customize>
125+
<PreviewSelect
126+
title="Animate On"
127+
options={animateOptions}
128+
value={animateOn}
129+
onChange={(v) => {
130+
animateOn = v as typeof animateOn;
131+
replay++;
132+
}}
133+
/>
134+
<PreviewSelect
135+
title="Click Mode"
136+
options={clickOptions}
137+
value={clickMode}
138+
isDisabled={animateOn !== 'click'}
139+
onChange={(v) => {
140+
clickMode = v as typeof clickMode;
141+
replay++;
142+
}}
143+
/>
144+
<PreviewSelect
145+
title="Direction"
146+
options={directionOptions}
147+
value={revealDirection}
148+
onChange={(v) => {
149+
revealDirection = v as typeof revealDirection;
150+
replay++;
151+
}}
152+
/>
153+
<PreviewSlider
154+
title="Speed"
155+
min={10}
156+
max={200}
157+
step={10}
158+
value={speed}
159+
valueUnit="ms"
160+
onChange={(v) => {
161+
speed = v;
162+
replay++;
163+
}}
164+
/>
165+
<PreviewSlider
166+
title="Iterations"
167+
min={1}
168+
max={50}
169+
step={1}
170+
value={maxIterations}
171+
onChange={(v) => {
172+
maxIterations = v;
173+
replay++;
174+
}}
175+
/>
176+
<PreviewSwitch
177+
title="Sequential"
178+
checked={sequential}
179+
onChange={(v) => {
180+
sequential = v;
181+
replay++;
182+
}}
183+
/>
184+
<PreviewSwitch
185+
title="Original Chars"
186+
checked={useOriginalCharsOnly}
187+
onChange={(v) => {
188+
useOriginalCharsOnly = v;
189+
replay++;
190+
}}
191+
/>
192+
</Customize>
193+
{/snippet}
194+
{#snippet propTable()}
195+
<PropTable rows={props} />
196+
{/snippet}
197+
</TabsLayout>

0 commit comments

Comments
 (0)