Welcome to the Widget Playground

Below are some example of widgets and tools that I can add to your web designs to make you stand out because your website should be fun and uniquely you!

FAQ Accordion

The Playground is a space where I showcase interactive website features — kind of like a digital toybox. It’s a place to explore creative and practical widgets that might be a perfect fit for your own site.
Yes! Every widget here can be customized and added to your site. Whether you're using Carrd, WordPress, or another platform, I’ll help you make it work for your brand and goals.
Nope — I keep everything lightweight and optimized. All the widgets here are chosen for speed, mobile responsiveness, and smooth performance.
That’s the whole point! The Playground is just a starting point. If you’ve got something creative in mind, I’d love to try building it with you.
Definitely. I build with simplicity in mind. You’ll have the option to keep things static or request easy-to-edit sections. And I’m always here if you want support later on.

Testimonial Sliders

“I wasn’t sure what I needed, but Natalee knew exactly how to guide me. My website looks cleaner than my kitchen now.”

— Ronald McDonald

“I thought I was just getting a widget, but turns out I got a whole vibe. The Playground is the best part of my site.”

— Dwayne “The Rock” Johnson

“The FAQ accordion made my visitors feel so heard. Honestly, I wish Disney had one of these.”

— Mickey Mouse

“My friends asked who made my new website. I said ‘Phillips Digital,’ and now they think I have a full creative team.”

— Beyoncé (probably)

“I clicked a button and something MOVED. As someone who’s made action movies… 10/10.”

— Keanu Reeves

“I haven’t had this much fun working on a website since my last Pixar film. Highly recommend.”

— Buzz Lightyear

Testimonial Sliders

Before and After Slider

After
Before
Before After
const container = document.getElementById("baContainer"); const overlay = document.getElementById("baOverlay"); const slider = document.getElementById("baSlider"); let isDragging = false; slider.addEventListener("mousedown", () => isDragging = true); window.addEventListener("mouseup", () => isDragging = false); window.addEventListener("mousemove", e => { if (!isDragging) return; const rect = container.getBoundingClientRect(); let x = e.clientX - rect.left; x = Math.max(0, Math.min(x, rect.width)); const percent = (x / rect.width) * 100; overlay.style.width = percent + "%"; slider.style.left = percent + "%"; }); function showBefore() { overlay.style.width = "100%"; slider.style.left = "100%"; } function showAfter() { overlay.style.width = "0%"; slider.style.left = "0%"; }

Light and Dark Mode

Click to Switch Theme

This box demonstrates how you can change styles on the fly. Try toggling between light and dark!

function toggleTheme() { const box = document.getElementById('themeBox'); box.classList.toggle('dark-mode'); box.classList.toggle('light-mode'); }

Conditional Contact Form

Get in Touch

function handleServiceChange() { const service = document.getElementById("service").value; document.getElementById("budgetGroup").style.display = (service === "web") ? "block" : "none"; document.getElementById("coachingGroup").style.display = (service === "coaching") ? "block" : "none"; }

Pricing Options

Basic

$10/month

  • 5 Projects
  • 10GB Storage
  • Email Support
  • Basic Analytics
  • Custom Subdomain
  • SSL Security
Buy Basic

Pro

$20/month

  • 20 Projects
  • 50GB Storage
  • Priority Support
  • Advanced Analytics
  • Custom Branding
  • Access to API
Buy Pro

Enterprise

$50/month

  • Unlimited Projects
  • 200GB Storage
  • Dedicated Support
  • Team Accounts
  • Custom Integrations
  • Onboarding Assistance
Buy Enterprise

Inspiration Roll

Click the button to roll for inspiration 🎲
const ideas = [ "What if your homepage told a story instead of sold a service?", "Add one unexpected color that still feels like you.", "What does your website *sound* like?", "Could your FAQ be a conversation instead?", "Turn your testimonials into a carousel. Bonus points if it scrolls sideways.", "Your button text is legally allowed to be funnier.", "Imagine a visitor scrolled all the way down. Give them a high five.", "Replace one stock photo with something real. Like your dog. Or a sandwich.", "This page brought to you by caffeine and stubbornness.", "Make your site 10% weirder. It’s allowed.", "Don’t tell me you’re professional. Show me what that looks like.", "Your About page isn’t about you — it’s about why they should care.", "If someone only reads one sentence on your site, make it count.", "Give me one reason to trust you in 5 seconds or less.", "What’s the nicest thing a client ever said to you? Put that front and center.", "Your website doesn’t have to say everything. Just the right things.", "You don’t need more pages. You need more clarity.", "A call-to-action isn’t pushy — it’s polite.", "What question do you answer 10x a week? Answer it once, really well." ]; function rollDice() { const output = document.getElementById("diceOutput"); const emoji = '🎲'; output.innerHTML = ${emoji} Rolling...; output.classList.remove("rolling-text"); setTimeout(() => { const random = ideas[Math.floor(Math.random() * ideas.length)]; output.innerHTML = ${emoji} ${random}; output.classList.add("rolling-text"); }, 500); }

Button with Changing Text

document.addEventListener("DOMContentLoaded", function () { const moods = [ "🎯 I Have a Vision", "💸 Fine, Take My Money", "🧞 Summon the Designer", "👀 This Button Knows a Guy", "🆘 Help Me, Natalee", "🧰 Make My Site Awesome", "🔍 I’m Ready to Be Found", "📇 Make Me Look Legit", "🚫 Save Me from Canva Hell", "🎲 Let’s Build Something Cool" ]; const moodBtn = document.getElementById("moodBtn"); window.changeMood = function () { const current = moodBtn.textContent; let newMood; do { newMood = moods[Math.floor(Math.random() * moods.length)]; } while (newMood === current); moodBtn.textContent = newMood; }; });

"Real time Buzz"

Someone just booked a homepage refresh
const buzzPhrases = [ "A handyman just booked a free website review", "A bakery picked their new brand colors", "Someone's About page finally makes sense", "A landscaping site now loads 3× faster", "Phillips Digital just helped someone get found on Google", "A therapist now has a contact form that actually gets used", "A client turned their FAQ into a client magnet", "Someone’s site just started working as hard as they do", "A boutique just launched their first online store", "An outdated site just found its new voice", "A call-to-action just got upgraded from meh to magnetic", "Someone finally said what they *really* do — clearly" ]; let index = 0; const buzzText = document.getElementById("buzzText"); function typeNext() { const phrase = buzzPhrases[index]; buzzText.innerText = ""; let i = 0; const typer = setInterval(() => { buzzText.innerText = phrase.substring(0, i); i++; if (i > phrase.length) { clearInterval(typer); setTimeout(typeNext, 2200); } }, 40); index = (index + 1) % buzzPhrases.length; } setTimeout(typeNext, 2000);