Julien Zerbib

Highlight Focused Element on tab key pressed so you can easely follow it.
Features :
<ol>
<li>Setup effect duration in ms</li>
<li>Setup hide delay in ms</li>
<li>Choose background and border color of the hilighted element</li>
<li>Setup background and border opacity of the hilighted element </li>
<li>Show or hide the default focus outline (hiding it break accessibility rules)</li>
</ol>
Visit <a href="http://www.juzed.fr/" rel="nofollow ugc">JuZED.fr</a> for example (just press “tab” key and follow the focus)

Highlight Focus

sakurapixel

OxyLeaf is a wellness and productivity tool that creates personalised ambient environments for focus, relaxation, and sleep. Built as a modern Single Page Application (SPA), OxyLeaf lets users mix calming sounds like rain, ocean waves, and forest ambience while displaying beautiful backgrounds to create their perfect work or relaxation space.
Think of it as a personal ambient sound studio – create custom playlists that blend multiple sounds together, each with individual volume control, and pair them with stunning visual backgrounds.
<a href="https://sakuraleaf.com/products/oxygen-working-and-relaxing-app-saas-ready/" rel="nofollow ugc">Home</a> | <a href="https://sakuraleaf.com/showcase/oxygen/" rel="nofollow ugc">Showcase</a> | <a href="https://sakuraleaf.com/showcase/oxygen/documentation/" rel="nofollow ugc">Docs</a>
<h4>Key Features</h4>
<ul>
<li>Custom Sound Playlists – Create and save personalized playlists mixing multiple ambient sounds</li>
<li>Individual Volume Control – Fine-tune each sound’s volume in your playlists</li>
<li>Beautiful Backgrounds – Choose from curated images or videos to display while sounds play</li>
<li>Playlist Backgrounds – Set unique backgrounds for each playlist that auto-switch when playing</li>
<li>Sleep Mode – Schedule daily automatic sound fade-out at your bedtime</li>
<li>Time & Date Display – Optional full-screen clock mode</li>
<li>User Accounts – Save your playlists and settings across devices</li>
<li>Google Sign-In – Quick login with your Google account</li>
<li>Multi-language Support – Interface available in multiple languages</li>
<li>Clean, Distraction-Free Interface – Minimalist design that gets out of your way</li>
</ul>
<h4>In Pro version</h4>
Complete SaaS business in a box. With built-in user management, payment processing via Paddle, multi-language support, and a beautiful single-page application interface, you can launch your own productivity SaaS platform immediately after installation.
<ul>
<li><a href="https://sakuraleaf.com/products/oxygen-working-and-relaxing-app-saas-ready/" rel="nofollow ugc">Front-end demo</a></li>
<li>Subscription and Payment Processing (Complete Paddle integration for hassle-free billing)</li>
<li>Paddle Billing API (Full integration with Paddle.com)</li>
<li>Free and Pro plans (Proven freemium business model)</li>
<li>Monthly and yearly billing (Maximise revenue with both options)</li>
<li>Trial period support (Offer free trials to boost conversions)</li>
<li>Automatic renewals (Recurring revenue on autopilot)</li>
<li>Cancellation management (Graceful handling with scheduled downgrades)</li>
<li>Global coverage (Sell in 200+ countries with automatic tax compliance)</li>
<li>Admin Pro access grants (Give complimentary Pro to specific users)</li>
<li>Subscription dashboard (Users can manage their subscription from the app)</li>
<li>Premium backgrounds (Add exclusive content for Pro subscribers)</li>
<li>Premium sounds (Add exclusive sounds for Pro subscribers)</li>
</ul>
<h3>Use Cases</h3>
<ul>
<li>Focus & Deep Work – Create distraction-free ambient environments perfect for coding, writing, or studying</li>
<li>Meditation & Relaxation – Mix calming sounds with serene backgrounds for meditation sessions</li>
<li>Sleep Aid – Use Sleep Mode to automatically fade sounds at bedtime for better sleep routines</li>
<li>Background Ambience – Display beautiful backgrounds with calming sounds during breaks or downtime</li>
<li>White Noise – Mask distracting office or home noises with customizable ambient soundscapes</li>
<li>Creative Work – Set the perfect mood for design, art, or creative writing sessions</li>
</ul>
<h3>Admin Features</h3>
Site administrators have full control over: 
* Adding and managing ambient sounds (upload audio files, set icons, organize in categories) 
* Curating background library (images and videos with attribution support) 
* Setting user limits (max playlists, sounds per playlist) 
* Configuring Google Sign-In and Cloudflare Turnstile 
* Managing multiple languages and translations 
* Choosing default backgrounds 
* Customizing frontend page placement
<h4>Resources</h4>
Here are some resources from which you can get sounds and backgrounds:
<ul>
<li><a href="https://freesound.org/" rel="nofollow ugc">freesound.org (Sounds)</a></li>
<li><a href="https://zapsplat.com/" rel="nofollow ugc">zapsplat.com (Sounds)</a></li>
<li><a href="https://uppbeat.io/" rel="nofollow ugc">uppbeat.io (Sounds)</a></li>
<li><a href="https://elements.envato.com/audio" rel="nofollow ugc">elements.envato.com/audio (Sounds)</a></li>
<li><a href="https://unsplash.com/" rel="nofollow ugc">unsplash.com (Image backgrounds)</a></li>
<li><a href="https://pexels.com/" rel="nofollow ugc">pexels.com (Video backgrounds)</a></li>
<li><a href="https://coverr.co/" rel="nofollow ugc">coverr.co (Video backgrounds)</a></li>
<li><a href="https://shutterstock.com/" rel="nofollow ugc">shutterstock.com (Video and image backgrounds)</a></li>
</ul>
<blockquote>
Tip! Make sure the sounds and video backgrounds have a perfect loop.
Tip! To obtain the best performance and speed, use AWS S3 storage. 
 There are free solutions out there as plugins. Example: 
 <a href="https://wordpress.org/plugins/amazon-s3-and-cloudfront/" rel="ugc">amazon-s3-and-cloudfront</a>
</blockquote>
<h3>External Services</h3>
This plugin connects to the following external third-party services:
<h4>Google Fonts</h4>
What it is: Google Fonts CDN (Content Delivery Network)
<h4>Google Sign-In (Optional)</h4>
What it is: Google OAuth 2.0 Authentication Service
<h4>Cloudflare Turnstile (Optional)</h4>
What it is: Cloudflare Turnstile CAPTCHA service
Important: Google Sign-In and Cloudflare Turnstile are optional features that must be explicitly enabled by the site administrator in Settings > OxyLeaf App. They are disabled by default and will not connect to external services unless configured with API credentials.
<h3>Credits (third-party libraries)</h3>
<ul>
<li><a href="https://getbootstrap.com/" rel="nofollow ugc">Bootstrap</a></li>
<li><a href="https://fonts.google.com" rel="nofollow ugc">Google Fonts</a></li>
<li><a href="https://github.com/lipis/flag-icons" rel="nofollow ugc">Flag-icons</a></li>
<li><a href="https://github.com/CodeSeven/toastr" rel="nofollow ugc">Toastr</a></li>
<li><a href="https://github.com/select2/select2" rel="nofollow ugc">Select2</a></li>
</ul>

OxyLeaf – Working and Relaxing App (SaaS ready)

OxyLeaf helps users improve focus and boost productivity with customizable ambient soundscapes and beautiful backgrounds.

Highlight Focus vs OxyLeaf – Working and Relaxing App (SaaS ready)