memevision/index.html at main · CosmicRing/memevision · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>MemeVision - AI Cinematic Series Studio</title>
    <link rel="preconnect" href="https://images.unsplash.com" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <header class="site-header" aria-label="Primary navigation">
      <a class="brand" href="#top" aria-label="MemeVision home">MemeVision</a>
      <nav class="nav-links">
        <a href="#studio">Studio</a>
        <a href="#shows">Shows</a>
        <a href="#pipeline">Pipeline</a>
        <a href="#pricing">Access</a>
      </nav>
      <a class="header-action" href="#pricing">Start creating</a>
    </header>

    <main id="top">
      <section class="hero has-demo-video" aria-label="MemeVision hero">
        <div class="hero-media" role="img" aria-label="Cinematic AI series hero scene">
          <video id="demoVideo" class="demo-video" src="./assets/videos/meme-drama-hero.mp4" playsinline muted autoplay loop></video>
        </div>
        <div class="hero-overlay"></div>
        <div class="hero-content">
          <p class="eyebrow">AI CINEMATIC COMIC STUDIO</p>
          <h1>Turn a meme into a cinematic series.</h1>
          <p class="hero-copy">
            MemeVision is an AI video studio for creators, studios, and media teams building
            serialized micro-dramas from characters, story beats, shots, voice, and trailers.
          </p>
          <div class="hero-actions">
            <a class="primary-action" href="#studio">Enter the studio</a>
            <label class="secondary-action upload-action" for="videoUpload">Upload demo video</label>
            <input id="videoUpload" class="video-input" type="file" accept="video/mp4,video/webm,video/quicktime,video/x-m4v" />
          </div>
          <p id="uploadStatus" class="upload-status">A demo reel is embedded. You can temporarily swap the hero video for a live pitch.</p>
        </div>
        <div class="hero-caption">
          <span>EPISODE 01</span>
          <span>Fantasy drama / AI-generated / mobile-first series</span>
        </div>
      </section>

      <section class="statement">
        <p class="eyebrow">THE NEW MEME CINEMA</p>
        <h2>Every meme can become a character. Every character can become a world. Every share can become the next episode.</h2>
      </section>

      <section class="reel-grid" id="shows" aria-label="Series samples">
        <article class="reel-card reel-card-large landscape-card">
          <video class="reel-video" src="./assets/videos/wuxia-fight-01.mp4" poster="./assets/posters/wuxia-fight-01.jpg" playsinline muted loop controls preload="metadata"></video>
          <div>
            <p class="eyebrow">WUXIA FIGHT SERIES</p>
            <h3>Blade light. Combat rhythm. A world in motion.</h3>
            <p>AI martial-arts drama samples built for kinetic action, weapon choreography, and short-form cliffhangers.</p>
          </div>
        </article>
        <article class="reel-card landscape-card">
          <video class="reel-video" src="./assets/videos/wuxia-fight-02.mp4" poster="./assets/posters/wuxia-fight-02.jpg" playsinline muted loop controls preload="metadata"></video>
          <div>
            <p class="eyebrow">COMBAT SCENE</p>
            <h3>Close combat, instant stakes</h3>
          </div>
        </article>
        <article class="reel-card landscape-card">
          <video class="reel-video" src="./assets/videos/wuxia-fight-03.mp4" poster="./assets/posters/wuxia-fight-03.jpg" playsinline muted loop controls preload="metadata"></video>
          <div>
            <p class="eyebrow">HERO MOMENT</p>
            <h3>One move, one iconic frame</h3>
          </div>
        </article>
      </section>

      <section class="genre-showcase" aria-label="Costume romance samples">
        <div class="section-intro">
          <p class="eyebrow">COSTUME ROMANCE</p>
          <h2>Costume romance: one glance, one fate, one season of tension.</h2>
        </div>
        <div class="romance-grid">
          <article class="reel-card romance-card portrait-card">
            <video class="reel-video" src="./assets/videos/romance-costume-01.mp4" poster="./assets/posters/romance-costume-01.jpg" playsinline muted loop controls preload="metadata"></video>
            <div>
              <p class="eyebrow">FATEFUL GLANCE</p>
              <h3>A glance under candlelight</h3>
              <p>Designed for first encounters, hidden identities, and high-emotion episode hooks.</p>
            </div>
          </article>
          <article class="reel-card romance-card portrait-card">
            <video class="reel-video" src="./assets/videos/romance-costume-02.mp4" poster="./assets/posters/romance-costume-02.jpg" playsinline muted loop controls preload="metadata"></video>
            <div>
              <p class="eyebrow">ROMANCE BEAT</p>
              <h3>Controlled tension, visible chemistry</h3>
              <p>Built around eye contact, costume detail, and emotional beats that travel across platforms.</p>
            </div>
          </article>
        </div>
      </section>

      <section class="genre-showcase kids-showcase" aria-label="Kids animation sample">
        <div class="section-intro">
          <p class="eyebrow">KIDS CUTE ANIMATION</p>
          <h2>Kids animation: soft characters, bright worlds, gentle adventure.</h2>
        </div>
        <article class="reel-card kids-card portrait-card">
          <video class="reel-video" src="./assets/videos/kids-cute-animation-01.mp4" poster="./assets/posters/kids-cute-animation-01.jpg" playsinline muted loop controls preload="metadata"></video>
          <div>
            <p class="eyebrow">FAMILY FRIENDLY</p>
            <h3>Turn storybook charm into an animated universe.</h3>
            <p>Made for kids animation, family content, mascot stories, and adorable adventure IP.</p>
          </div>
        </article>
      </section>

      <section class="studio" id="studio">
        <div class="section-intro">
          <p class="eyebrow">MEME TO SERIES</p>
          <h2>From viral idea to finished episode, with cinematic language built in.</h2>
        </div>
        <div class="studio-panel">
          <div class="timeline">
            <div class="timeline-row active">
              <span>01</span>
              <div>
                <h3>Prompt the premise</h3>
                <p>Define the lead, conflict, twist, and release rhythm in one concise brief.</p>
              </div>
            </div>
            <div class="timeline-row">
              <span>02</span>
              <div>
                <h3>Generate shot beats</h3>
                <p>Break the story into mobile-first shots, dialogue, voiceover, and transitions.</p>
              </div>
            </div>
            <div class="timeline-row">
              <span>03</span>
              <div>
                <h3>Lock character continuity</h3>
                <p>Keep faces, outfits, environments, and tone consistent across episodes.</p>
              </div>
            </div>
            <div class="timeline-row">
              <span>04</span>
              <div>
                <h3>Package the release</h3>
                <p>Export posters, trailers, episodes, captions, and platform-ready copy.</p>
              </div>
            </div>
          </div>
          <div class="studio-preview">
            <video class="studio-video" src="./assets/videos/studio-preview-demo.mp4" poster="./assets/posters/studio-preview-demo.jpg" playsinline muted loop controls preload="metadata"></video>
            <div class="preview-meta">
              <span>SCENE 08</span>
              <span>Character continuity 96%</span>
            </div>
          </div>
        </div>
      </section>

      <section class="pipeline" id="pipeline">
        <p class="eyebrow">PRODUCTION SYSTEM</p>
        <div class="pipeline-grid">
          <article>
            <h3>Character universe</h3>
            <p>Build character cards, relationship maps, and recurring lines so a meme becomes IP.</p>
          </article>
          <article>
            <h3>Episode rhythm</h3>
            <p>Create hooks for 30-second, 60-second, and 3-minute formats across social platforms.</p>
          </article>
          <article>
            <h3>Visual genres</h3>
            <p>Support martial arts, costume romance, kids animation, urban fantasy, and more.</p>
          </article>
          <article>
            <h3>Market packaging</h3>
            <p>Generate names, posters, trailer titles, captions, and distribution-ready assets.</p>
          </article>
        </div>
      </section>

      <section class="premiere" id="pricing">
        <div>
          <p class="eyebrow">EARLY ACCESS</p>
          <h2>Now opening early access for studios, agencies, and independent creators.</h2>
          <p>
            Bring a meme, a character, or a short drama outline. MemeVision turns it into a serializable AI video project.
          </p>
        </div>
        <a class="primary-action light" href="mailto:hello@memevision.example">Request access</a>
      </section>
    </main>

    <footer class="site-footer">
      <span>MemeVision</span>
      <span>AI cinematic comic studio</span>
      <span>2026</span>
    </footer>
    <script src="./script.js"></script>
  </body>
</html>