Creative Engine

Visyonix

Turn simple ideas into premium creative concepts, structured prompts, and cinematic direction creators can use immediately.

Built to help you shape ads, music videos, trailers, gospel visuals, and short-form content with more clarity, speed, and creative power.

Choose a mode

Enter your idea

Mode: Cinematic Ad

Result

Your result will appear here.

.hero { margin-bottom: 28px; padding: 26px 24px 8px; border-radius: 22px; background: linear-gradient(135deg, rgba(79, 70, 229, 0.14), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24); } .hero-badge { display: inline-block; margin-bottom: 14px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: bold; letter-spacing: 0.08em; text-transform: uppercase; color: #c7d2fe; background: rgba(99, 102, 241, 0.16); border: 1px solid rgba(99, 102, 241, 0.25); } h1 { margin: 0 0 10px 0; font-size: 46px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; background: linear-gradient(90deg, #fff7d6 0%, #facc15 45%, #eab308 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 14px rgba(250, 204, 21, 0.18); } .subtext { color: #d1d5db; font-size: 17px; line-height: 1.65; margin-bottom: 18px; max-width: 760px; } .hero-caption { color: #9ca3af; font-size: 14px; line-height: 1.55; max-width: 720px; padding-left: 14px; border-left: 3px solid rgba(99, 102, 241, 0.45); } .panel { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28); backdrop-filter: blur(6px); } .section-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: #bdbdbd; margin-bottom: 12px; font-weight: bold; } .modes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .mode-btn { background: #1f2937; color: #e5e7eb; border: 1px solid #374151; padding: 10px 14px; border-radius: 999px; font-size: 14px; cursor: pointer; transition: all 0.2s ease; } .mode-btn:hover { background: #273449; transform: translateY(-1px); } .mode-btn.active { background: #4f46e5; border-color: #6366f1; color: #ffffff; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } .mode-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } textarea { width: 100%; min-height: 170px; padding: 16px; border-radius: 14px; border: 1px solid #374151; background: #0f172a; color: #ffffff; font-size: 16px; line-height: 1.5; resize: vertical; outline: none; margin-bottom: 16px; } textarea:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } textarea:disabled { opacity: 0.8; cursor: wait; } .action-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .primary-btn, .secondary-btn { border: none; border-radius: 12px; padding: 12px 18px; font-size: 15px; cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease, background 0.2s ease; } .primary-btn:hover, .secondary-btn:hover { transform: translateY(-1px); } .primary-btn { background: #4f46e5; color: #ffffff; font-weight: bold; } .primary-btn:disabled, .secondary-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; } .secondary-btn { background: #1f2937; color: #ffffff; border: 1px solid #374151; } .status { color: #bdbdbd; font-size: 14px; min-height: 20px; } .status.loading { color: #c7d2fe; } .result-wrap { margin-top: 24px; } #result { margin-top: 10px; padding: 18px; background: #0b1220; border: 1px solid #243041; border-radius: 14px; min-height: 180px; line-height: 1.6; color: #eef2ff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #result.loading { border-color: rgba(99, 102, 241, 0.5); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08); } .loading-shell { display: flex; align-items: center; gap: 12px; color: #c7d2fe; min-height: 120px; } .loading-dot { width: 12px; height: 12px; border-radius: 999px; background: #6366f1; animation: pulse 1.1s infinite ease-in-out; flex-shrink: 0; } @keyframes pulse { 0% { transform: scale(0.8); opacity: 0.55; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0.8); opacity: 0.55; } } .result-card { margin-bottom: 16px; padding: 14px; border-radius: 12px; background: rgba(79, 70, 229, 0.08); border: 1px solid rgba(99, 102, 241, 0.2); } .result-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; } .result-card-title { font-weight: bold; color: #a5b4fc; letter-spacing: 0.02em; } .copy-btn { font-size: 12px; padding: 6px 10px; background: #1f2937; border: 1px solid #374151; border-radius: 8px; cursor: pointer; color: #ffffff; flex-shrink: 0; } .copy-btn:hover { background: #374151; } .copy-btn:disabled { opacity: 0.65; cursor: not-allowed; } .result-card-body { line-height: 1.65; color: #eef2ff; white-space: normal; } .footer-note { margin-top: 18px; color: #9ca3af; font-size: 13px; } @media (max-width: 640px) { body { padding: 24px 14px; } .hero { padding: 20px 18px 6px; } h1 { font-size: 34px; } .subtext { font-size: 16px; } .panel { padding: 18px; } .action-row { flex-direction: column; align-items: stretch; } .primary-btn, .secondary-btn { width: 100%; } .result-header { flex-direction: column; align-items: flex-start; } .copy-btn { width: 100%; } }