BuboBubo/bitfielder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update the welcome popup

Browse Source
This commit is contained in:
Raphaël Forment
2025-07-15 01:20:24 +02:00
parent 2cee4084c0
commit 9db1479cc0
1 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/WelcomePopup.tsx
View File

@ -32,33 +32,42 @@ export const WelcomePopup: React.FC = () => {
<h2 className="welcome-title">Welcome to BitFielder</h2> <h2 className="welcome-title">Welcome to BitFielder</h2>
<div className="welcome-content"> <div className="welcome-content">
<p> <p style={{ textAlign: 'justify' }}>
BitFielder is an experimental lofi bitfield shader editor made by{' '} BitFielder is a bitfield shader editor made by{' '}
<a href="https://raphaelforment.fr">BuboBubo</a>. Use it to create <a href="https://raphaelforment.fr">BuboBubo</a>. Use it to live code weird reactive visuals.
visual compositions through code. I use it for fun :){' '} I built this tool to have fun and explore. It is quite easy to learn and quite rewarding if you
put time into it! This tool can eat a lot of CPU, beware!{' '}
</p> </p>
<h3>Getting Started</h3> <h3>Getting Started</h3>
<ul> <ul>
<li> <li>Edit the shader code and press <i>Eval</i> or <i>Ctrl+Enter</i>
Edit the shader code and press <i>Eval</i> or <i>Ctrl+Enter</i> <ul style={{ marginTop: '8px' }}>
<li><b>Lazy mode:</b> press <i>R</i>, <i>G</i> and <i>M</i> randomly!</li>
</ul>
</li> </li>
<li>Use special variables to create reactive effects</li> <li>Use special variables to create reactive effects</li>
<li>Explore/store shaders in the library (left pane)</li> <li>Learn more variables / operators / functions</li>
<li>Store shaders in the library (left pane)</li>
<li>Export your creations as images or sharable links</li> <li>Export your creations as images or sharable links</li>
</ul> </ul>
<h3>Key Features</h3> <h3>Key Features</h3>
<ul> <ul>
<li> <li>
<strong>Real-time editing:</strong> See your changes instantly <strong>Realtime editing:</strong> See your changes instantly
</li> </li>
<li> <li>
<strong>Motion and touch:</strong> Mouse, touchscreen support <strong>Motion and touch:</strong> Mouse, touchscreen support
</li> </li>
<li> <li>
<strong>Audio reactive:</strong> Synchronize with a sound signal <strong>Audio reactive:</strong> Synchronize with a sound source
</li> </li>
<li>
<strong>Randomly cool:</strong> Pretty much any formula works!
<ul style={{ marginTop: '8px' }}><li>Extra keybindings for fun.</li></ul>
</li>
<li> <li>
<strong>Export capabilities:</strong> Save and share your work <strong>Export capabilities:</strong> Save and share your work
</li> </li>