Tag: Generator

Apps Badges Colors Fun Generator HTML Important IMVU Creator Tools Productivity Apps Unicodes


  • Button Generator

    View Content

    ⭐Button Generator — User Guide


    This guide walks you through every feature of the Advanced Button Generator so you can create beautiful, customizable buttons for IMVU, websites, profiles, or any HTML‑based layout.

    🎯 What This Tool Does
    The Advanced Button Generator lets you design a fully custom button with:

    • Gradients (2–4 colors)
    • Hover animations
    • Shadows, glow, glassmorphism, and neumorphism
    • Icons
    • Custom fonts
    • Adjustable padding, borders, and sizing
    • Live preview
    • One‑click HTML/CSS export
      Everything updates instantly as you change settings.

    🧩 1. Button Basics
    Button Text
    Type the label that appears on your button (e.g., “Buy Now”, “Join”, “Click Me”).
    Button Link
    Add a URL if you want the button to open a webpage.
    Link Target
    Choose whether the link opens in the same tab or a new one.

    📐 2. Layout & Sizing
    Width Mode

    • Auto — Button fits its content
    • Fixed (px) — Set an exact width
    • Percent (%) — Button fills a percentage of its container
      Padding
      Controls the space inside the button:
    • Vertical padding (top/bottom)
    • Horizontal padding (left/right)
      Corner Radius
      Round the corners from sharp (0px) to fully pill‑shaped (999px).

    🎨 3. Colors & Gradients
    Fill Mode
    Choose between:

    • Solid Color
    • Gradient (2–4 colors)
      Solid Color
      Pick a single color for the background.
      Gradient Options
    • Choose 2, 3, or 4 colors
    • Adjust the gradient angle (0–360°)
    • Each color has its own color picker

    ✍️ 4. Typography
    Font Size
    Set the text size in pixels.
    Font Weight
    Choose how bold the text should be.
    Font Family
    Use any valid CSS font stack.
    Text Color
    Pick the color of the button text.

    ✨ 5. Icons
    Enable the icon toggle to add a symbol before or after the text.
    You can customize:

    • Icon character (emoji or symbol)
    • Icon position (left/right)
    • Icon size
    • Icon color
    • Spacing between icon and text

    🌫️ 6. Shadows, Glow & Effects
    Shadow Presets
    Choose from:

    • None
    • Soft
    • Deep
    • Neon
    • Outline
    • Inset
    • Custom
      Custom Shadow
      If “Custom” is selected, you can control:
    • Offset X/Y
    • Blur
    • Spread
    • Color
    • Inset toggle
      Glow
      Adds a soft outer glow with adjustable:
    • Color
    • Strength
      Glassmorphism
      Creates a frosted‑glass effect:
    • Background opacity
    • Backdrop blur
      Neumorphism
      Soft 3D‑style lighting:
    • Light or dark mode
    • Depth control

    🖱️ 7. Hover Effects
    Choose how the button behaves when hovered:

    • Subtle lift
    • Strong lift
    • Scale up
    • Scale down
    • Rotate
    • Color shift
    • Gradient shift
    • Glow pulse
    • None
      Hover Color Shift Options
      If selected, you can customize:
    • Hover text color
    • Hover border color
      Hover Duration
      Controls animation speed (in milliseconds).

    🧱 8. Borders
    Customize:

    • Border width
    • Border color

    📝 9. Text Shadow
    Enable text shadow for extra depth.
    Adjust:

    • Offset X/Y
    • Blur
    • Shadow color

    ❤️ 10. Support Link
    Enable this to add a small “Powered by NekyPop” link under your button.

    🧪 11. Live Preview
    Everything you change updates instantly in the preview box.
    This helps you fine‑tune your design before generating code.

    📤 12. Generate HTML & CSS
    Click Generate Button Code to produce:

    • A block containing your button’s CSS
    • An tag containing your button’s HTML
      You can paste this into:
    • IMVU HTML panels
    • Websites
    • Blogs
    • Custom profile layouts

    📋 13. Copy Code
    Click Copy Code to copy the entire HTML/CSS block to your clipboard.

    💾 14. Import / Export Settings
    Export Settings
    Saves all your current settings into a file.
    Import Settings
    Load a previously saved file to restore a design instantly.
    Clear Settings
    Resets everything to default.

  • Animated Text Maker

    View Content

    📝 Animated Text Maker – User Guide

    Create beautiful animated text with full control over appearance, animation styles, and export settings. Ideal for creators, designers, and content makers.


    📌 Getting Started

    1. Open the tool (in your browser or from your site).
    2. The screen is split into two:
      • Left column: All the controls.
      • Right column: A live preview canvas.

    ✏️ 1. Text & Font

    • Your Text: Enter what you want to animate.
    • Transform: Set text to:
      • None
      • UPPERCASE
      • lowercase
      • Capitalize
    • Letter Spacing: Adjust the spacing between letters.
    • Font & Size: Choose from preset fonts or upload your own.
    • Line Height: Spacing between lines of text.
    • Offset X/Y: Move the text horizontally or vertically.
    • Load Custom Font: Upload a .ttf, .otf, .woff, or .woff2 file.

    🎨 2. Appearance

    • Text Color / Background Color
    • Transparent Background: Enables clear backgrounds (important for overlays).
    • Background Image: Upload an image to use as background.
      • Choose fit: Cover, Contain, or Stretch.
      • Adjust position with X/Y offset.
    • Drop Shadow:
      • Enable or disable it.
      • Customize color, blur, and offset.

    🌀 3. Animation

    • Style: Choose from 18 styles:
      • Bounce, Fade, Slide In, Scale, Rotate, Wave, Stomp, Jitter, Typing, Flicker, Scan Line, Drop In, Swing, Random, Blur In, Glitch, Neon Glow.
    • Animate By: Characters, Words, or Lines.
    • Speed: How fast the animation cycles.
    • Amplitude: How strong the movement or effect is.
    • Stagger Delay: Adds delay between animated parts (optional).

    🔧 Some animations show extra options:

    • Slide: Direction.
    • Flicker/ScanLine: Color + density.
    • Typing: Cursor style.
    • Glitch: Shift intensity.
    • Neon: Glow color.

    💾 4. Export

    • Export as Animated GIF
    • Crop to Content: Automatically crops blank space.
    • Custom Width / Height: Set the output resolution.
    • Export Button: Click to render and download the animation as a .gif.

    📂 5. Session Tools

    • Import Settings: Load a .json file with saved options.
    • Export Settings: Save your current setup as a .json file.
    • Clear All: Reset the tool (with confirmation).

    🧠 Tips

    • Preview updates live — adjust sliders and see changes instantly.
    • GIF export might take a few seconds.
    • For transparent exports, avoid complex GIF backgrounds — use PNG (if supported in future updates).

    🛠️ Troubleshooting

    • If the export button says “Loading Libraries…” – wait a few seconds for GIF.js to load.
    • Use a modern browser (like Chrome or Firefox) for best results.
    • Clear browser cache or use “Clear All” if the interface acts up.
  • Floating Menu Generator – Update

    View Content

    I’ve made some upgrades to improve your experience:

    Added: New Advanced Section
    You can now enter custom CSS directly! Add your own class names with dedicated input fields for better control and creativity.

    Menu Items Moved
    Navigation just got easier, I’ve moved the menu items to the top for quicker access.

    Collapsible Option Sections
    No more clutter! You can now collapse option sections to keep your workspace clean and focused.

  • Menu Generator

    View Content

    🧰 Use Case: Menu Generator

    Purpose:
    The Menu Generator helps creators, especially IMVU homepage designers, easily build fully customized CSS-based navigation menus with submenus — visually and without writing code. You can design horizontal pop-out or vertical accordion-style menus with rich styling options and export clean, ready-to-use HTML/CSS code.

    Audience:
    Perfect for creators on platforms like IMVU, personal bloggers, web designers, and anyone who needs custom-styled navigation menus but doesn’t want to manually code them.

    Key Features:

    • Visual menu item builder (main items & submenus)
    • Full color control, padding/margin/border sliders
    • Horizontal or vertical menu mode
    • Custom hover styles and submenu offsets
    • Optional “Powered by NekyPop!” link
    • Live code preview panel
    • Export clean HTML + CSS for copy-paste

    🪄 How to Use the Menu Generator

    1. 🧭 Choose Menu Orientation

    Go to Global Menu Styles > Orientation and select:

    • Horizontal for a typical top bar with dropdowns
    • Vertical for sidebar accordion-style menus

    2. ➕ Add Menu Items

    • Click “Add Main Menu Item”
    • Each main item can include:
      • Label
      • Link URL
      • Submenu toggle
      • Reorder buttons
      • Submenu items (click “Add Submenu Item”)

    You can collapse/expand each item to keep your workspace organized.

    3. 🎨 Style the Menu

    Under Global Menu Styles:

    • Choose the menu width (auto, 100%, or 200px, etc.)
    • Set background, padding, borders, and shadow
    • Customize the container for both the menu and submenus

    4. ✏️ Style Main Items

    In Main Item Styles:

    • Pick font, size, color
    • Set background color and hover effects
    • Adjust individual padding, margin, borders
    • Optional: Add a custom class name for manual styling

    5. 🧩 Style Submenu Items

    In Submenu Item Styles:

    • Same full control over fonts, colors, hover, and spacing
    • Use this to differentiate submenu appearance from main menu

    6. 🎯 Live Preview

    • Scroll to the Preview Canvas on the right to see your menu take shape
    • Toggle dark/light mode (if implemented)
    • Real-time updates apply as you tweak settings

    7. 💾 Copy the Code

    • Scroll to the Code Output section
    • Copy the generated HTML & CSS and paste it into your website or homepage
    • You can paste this into IMVU homepage HTML boxes or personal websites directly

    8. 🌸 (Optional) NekyPop Support

    • Enable a “Powered by NekyPop!” footer link
    • Customize its appearance just like a menu item
  • Tabs Generator – Update

    View Content

    📢 Tabs Generator – Optimization Update

    I’ve just rolled out a performance-first refresh to make building gorgeous tabbed layouts even smoother.

    What’s new?

    • Collapsible option categories – hide advanced settings until you need them, keeping the interface clean.
    • Collapsible tab content – focus on one tab at a time without visual clutter.
    • Expandable live preview – pop the preview open to full width so you can check spacing and responsiveness on the fly.
    • New tab orientations – now place your tabs on the left, right, or bottom for even more layout freedom.
    • Custom CSS category – inject your own styles to fine-tune every detail of your tabs.

    Pro tip: Your work still auto-saves locally, but always hit Export when you finish a session. A quick download guarantees you’ll never lose a tweak—even if you clear your browser data later.

    Happy tab-crafting! 🎨✨

  • Video Frame Generator

    View Content

    🎥 Video Frame Generator– User Guide

    Welcome to the Video Frame Generator, a powerful tool that lets you embed YouTube, Rumble, or Vimeo videos inside beautifully customizable frames — perfect for homepage embeds, portfolios, IMVU profiles, or project showcases!


    🔧 What It Does

    This tool allows you to:

    • Embed a video with a stylish frame.
    • Customize padding, borders, shadows, and rounded corners.
    • Choose between solid or gradient backgrounds.
    • Add a support link (e.g., “Generated by NekyPop!”).
    • Export and import your designs.
    • Copy ready-to-use HTML code for any website.

    🧭 How to Use It

    1. Paste Your Video URL

    • Go to the “Video Source” section.
    • Enter a link from YouTube, Rumble, or Vimeo.

    Example:

    arduinoCopyEdithttps://www.youtube.com/watch?v=dQw4w9WgXcQ
    

    2. Customize Your Frame

    🧱 Padding

    • Use the slider to set the space between your video and the frame’s inner edge.

    🎨 Background

    • Click either “Solid” or “Gradient”:
      • Solid: Choose one color.
      • Gradient: Choose type (Linear/Radial), angle/shape, and add up to 10 color stops.

    ⬛ Border

    • Set width, color, and style (solid, dashed, double, etc.)

    🔘 Corner Radius

    • Round the corners of your video frame for a smoother look.

    🌫️ Shadow

    • Toggle on/off and adjust X, Y, blur, and spread.
    • Pick the shadow color too.

    3. Add Support Link (Optional)

    • Enable the “Support NekyPop!” checkbox.
    • Customize the text, font size, colors, and preview it live.

    4. Export / Import / Reset

    • Export Settings: Download a .json file to save your design.
    • Import Settings: Upload a saved .json file.
    • Clear All Settings: Reset everything to default.

    5. Copy Embed Code

    • Scroll to the “Generated Embed Code” section.
    • Click “Copy Code” to use in:
      • WordPress HTML blocks
      • IMVU Homepages
      • Any custom website

    💡 Tips

    • Hover or tap controls to reveal their current values.
    • Gradient stops must be between 0% and 100%.
    • Shadow spread accepts negative values for tighter effects.
    • Every setting you change is saved in local storage, so your progress won’t be lost when refreshing the page.

    🛟 Supported Video Platforms

    ✅ YouTube
    ✅ Rumble
    ✅ Vimeo

    Paste the full video link, and the tool will automatically convert it to an embeddable version.


    🧩 Use Cases

    • Showcase a video in your art portfolio
    • Embed tutorials or trailers in your personal site
    • Stylize content for digital product pages
    • Embed IMVU product previews inside a framed layout

    ❤️ Powered by NekyPop

    Don’t forget to support the creator by keeping the support link enabled, or visiting:
    🔗 https://nekypop.com

  • Product Gallery Generator

    View Content

    🛍️ Use Case: IMVU Product Gallery Generator

    The IMVU Product Gallery Generator is a web-based tool that helps IMVU creators and shop owners build beautifully styled product displays to embed on their IMVU homepage, blogs, or personal websites. With full control over layout, styling, and content, it lets you:

    • Show off your products with images, prices, and links
    • Customize the appearance to match your brand or homepage
    • Generate copy-paste-ready HTML with no coding required
    • Preview your layout live as you build it
    • Import/export settings for future edits or backups

    Perfect for creators who want a visually attractive way to promote their catalog items and boost sales.


    🧭 Step-by-Step Guide

    1. Add Your Products

    • Click “Add Another Product”
    • Fill in:
      • Product Name (e.g. Galaxy Spark Aura)
      • Description (optional short text)
      • Price (Credits) (e.g. 699)
      • Image URL (hotlink from IMVU catalog, Catbox, etc.)
      • Product Link (link to the IMVU shop item)

    You can add multiple items, reorder them, duplicate them, or remove any.


    2. Style the Gallery

    Under Gallery Configuration, you’ll find sections to tweak:

    • Gallery Styling – background, spacing, alignment
    • Tile Styling – size, colors, borders, and shadows
    • Image Settings – how images fit inside the tile
    • Font Settings – font family, sizes, and colors for:
      • Product Name
      • Description
      • Price
      • Currency symbol (“CR”)

    Tip: Enable the optional “Support NekyPop!” link if you want to display a credit below your gallery.


    3. Live Preview

    As you edit, the right side shows a real-time preview in dark or light mode.
    You can toggle the mode with the switch above the preview.


    4. Get the Code

    Scroll to the HTML Snippet Code box:

    • Click “Copy Code”
    • Paste it into your IMVU homepage (or any HTML space)

    Done! ✨ Your product tiles will display exactly as styled.


    5. Save or Reload Your Work

    • Click “Export Settings” to download your current setup (.json file)
    • Use “Import Settings” to load it again later
    • Click “Clear All” to start fresh (resets styles + products)

    ✅ Why Use This?

    • Zero coding knowledge needed
    • Consistent layout, no broken tables or floating boxes
    • Looks great on all devices
    • Saves you hours of manual HTML writing

  • Glitter Text Generator

    View Content

    ✨ Glitter Text Generator – User Guide

    Create beautiful, sparkly, and stylish text for IMVU, blogs, and websites using the NekyPop Glitter Text Generator. This tool lets you customize text with glitter, gradients, glow, shadows, and more — then export it as an image or HTML snippet.


    🌟 Features Overview

    • Real-Time Preview: See your customized text instantly on a canvas.
    • Multiple Styles: Choose from Glitter, Glow, Pastel Gradient, Solid, Outline, Neon, or Drop Shadow.
    • Custom Fonts: Use built-in fonts or import your own .ttf, .otf, .woff, .woff2, or .eot files.
    • Color Picker: Add up to 5 custom colors (great for gradients or effects).
    • Advanced Effects: Adjust glitter sparkle, shadow blur, glow intensity, gradient angle, and more.
    • IMVU Code Generator: Auto-generate and copy IMVU-safe HTML using your hosted image.
    • Download as PNG: Save your glitter text as an image file.
    • Dark & Light Canvas Toggle: View how your design looks in both day and night modes.
    • Settings Import/Export: Save your settings or reload them later with a .json file.

    🧰 How to Use

    1. Type Your Text

    Enter your message in the “Text” field (e.g. NekyPop!).

    2. Choose a Font

    Select from built-in fonts like Inter, Arial, or Comic Sans — or import your own.

    3. Style the Text

    Check options like:

    • Bold / Italic / Underline / Strikethrough

    4. Pick a Style

    Use the dropdown to choose:

    • Glitter
    • Glow 🔥
    • Pastel Gradient 🌸
    • Solid Color
    • Outline ✏️
    • Neon 💡
    • Drop Shadow 🧱

    5. Customize Colors

    • Add up to 5 colors (for gradients and effects).
    • Additional sliders will appear depending on the style chosen.

    6. Tune Effects (If Available)

    • Adjust sparkle size, blur, angle, shadow offset, opacity, etc.

    7. Switch Background Mode

    Use the ☀️ / 🌙 toggle to change canvas background.

    8. Download Your Image

    Click “Download Image (PNG)” to save your design.

    9. Generate IMVU Code

    1. Upload your PNG to a site like catbox.moe
    2. Paste the direct link
    3. Click “Generate & Copy Code”
    4. Paste it into your IMVU homepage

    10. Save or Load Settings

    • Export your current look as a .json file.
    • Re-import saved settings anytime.
    • Use “Reset” to return to defaults.

    🖋 Tips

    • Text too long? Try reducing font size or using fewer effects.
    • Want a cleaner image? Use Solid or Pastel mode with one or two colors.
    • Add support link? Keep “Support NekyPop!” checked for automatic credit in IMVU HTML.
  • Unicode Font Generator

    View Content

    🎯 Use Case: Unicode Font Generator

    The Unicode Font Generator is perfect for creators, influencers, and designers who want to:

    • Stylize text for social media bios, post captions, usernames, or nicknames
    • Beautify Discord names, statuses, or server headers
    • Create eye-catching titles or subtitles for their websites, blogs, or IMVU profiles
    • Make unique nicknames or emotes for Twitch, TikTok, Instagram, etc.
    • Add playful or expressive fancy fonts to content without installing anything

    It’s especially useful in platforms that allow Unicode text but don’t support custom fonts.


    📖 User Guide: How to Use the Unicode Font Generator

    ✨ Step 1: Visit the Tool

    Open the tool in your browser. You’ll see a dark-themed interface with a single input box and a list of styled text blocks.

    📝 Step 2: Type or Paste Your Text

    In the box labeled “Enter your text here”, write anything you want to transform (e.g., NekyPop, Hello World, etc.).

    🔁 Step 3: View the Results

    As you type, the tool automatically converts your input into multiple font styles like:

    • 𝓑𝓸𝓵𝓭 𝓢𝓬𝓻𝓲𝓹𝓽
    • 𝔉𝔯𝔞𝔨𝔱𝔲𝔯
    • Fullwidth
    • ⓒⓘⓡⓒⓛⓔⓓ
    • 𝙈𝙤𝙣𝙤𝙨𝙥𝙖𝙘𝙚
    • ꜰᴀɴᴄʏ sᴍᴀʟʟ ᴄᴀᴘs
    • Ń̷͋͆̿͆̿͊̐e̓̽̏̈́̀̾̎̇́̒͝k̛͗̔̈́̄́͒̇͒̏̕y̐̄̆̐͌́̈́̓̇̒͘P̛̄͛̽̍̓̅̿̓̎̚o͊̐̅̍̍̾̔̓̎̇̚p͑̅̈́̂̓̐̐̔̍̎͝ (chaotic style!)

    📋 Step 4: Copy Your Favorite

    Under each output block, click the Copy button to instantly copy the stylized version of your text to your clipboard.

    You’ll see a green message saying “Copied to clipboard!” when it works.

    🔙 Step 5: Return

    Click the “Back to nekypop.com” button to return to your homepage or dashboard.

  • Tabs Generator

    View Content

    🧰 Use Case: HTML/CSS Tabs Generator

    The Tabs Generator app is a web-based tool designed to help users easily create custom-styled tabbed content sections using HTML and CSS — perfect for IMVU profiles, personal websites, landing pages, or dashboards.

    Who it’s for:

    • IMVU users wanting clean, organized profile layouts
    • Creators who want to present categorized information (e.g. FAQ, product info)
    • Web designers needing quick tab layout mockups
    • Beginners learning HTML/CSS structure through visual tools

    Key Features:

    • Add and reorder multiple tabs
    • Live preview with light/dark mode toggle
    • Custom fonts, sizes, colors, spacing, borders, and more
    • Tab image support
    • Export & import designs as JSON
    • One-click HTML + CSS code generation

    📖 How to Use the Tabs Generator

    🧱 1. Add Tabs

    • Click “Add Tab” to create a new tab block.
    • Set the tab label, content, and optional image URL for each tab.

    🎨 2. Customize Global Styles

    • Fonts & Sizes: Choose fonts for tab labels, content, and support link. Adjust sizes.
    • Container: Set padding, background color, border, and radius of the entire tab box.
    • Tab List: Control spacing between tabs, padding, background color, and border radius.
    • Inactive, Hover, and Active Tabs: Define how each tab state looks (color, border, radius, etc.)
    • Content Area: Customize padding, margin, background and text styles for tab content.
    • Optional: Enable Support NekyPop to add a small link.

    💡 3. Preview in Real Time

    • Scroll to the Preview panel to see the live result.
    • Toggle Light Mode on or off to check both themes.

    💾 4. Save, Import, Reset

    • Export: Save your current setup as a .json file.
    • Import: Load a previously saved .json file to resume work.
    • Reset: Wipe all settings and return to default.

    🧩 5. Get Your Code

    • Scroll to the Generated Code panel.
    • Click “Copy Code” to get your ready-to-use HTML + CSS.