1<!doctype html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>WIP. DOCKET</title> 7 <meta name="description" content="WIP. DOCKET is a creative SaaS workspace for organize ad/video references, video sharing with timestamped notes, AI treatments builder, production research, and many more solutions for creative industery"> 8 <link rel="stylesheet" href="styles.css?v=panorama-mobile-compact-2"> 9
9<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=XCsi6uM5EVosdhls0Ku0xzhKMcjqO5tQ9Yu7Pcs8bnlmvPcApJXltHC0e4EWOwzq_VO2PbWBXt7UhRsG_1LGwurFtvsytib84ZUbpU6oMNlxroVe68ealjuwh3LuFGDQ" charset="UTF-8"></script>
9<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=N6fDNPl8rRkpLzgH6G2uV74eW7OGnSvM6RnTTB6dZV4xRQmPJaRRP8wHcE-QP0pyhpNSsiS09z0IJU_hOwgCf53zCAwx2MkJ5qI2iQrqQcLZ_rdY6XqYKtMv0y-O7GjP" charset="UTF-8"></script>
9<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=lq_qLbYhrPN_2jzf1M5WnjJFxRzW219aY5qOTUxGYsx8px3Ur86EHvhUxWTGJUOOdh1kJnU_9CP_4z5Tkqy3hHssHux_-nUA6m2RuEM3-Sjm6eT854XqUJnMyN1isFaL" charset="UTF-8"></script>
9<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=sZjeMa78dvMly0XZgMZRpvFnjcB3KdNlB7GQP47Gy6T0zfyzktxzQBprEk9pRGStORtqVtEgsDpbR1kJgYT4-WSAy0wouaYZK_3gR3MJgiQB34TdS0LSG9_u7Xafq5ZY" charset="UTF-8"></script>
9<style> 10 .pricing-copy p { 11 text-align: justify; 12 } 13 .payment-badges { 14 display: flex; 15 flex-wrap: wrap; 16 gap: 10px; 17 margin-top: 32px; 18 } 19 .payment-badge { 20 display: inline-flex; 21 width: 90px; 22 height: 54px; 23 border-radius: 8px; 24 overflow: hidden; 25 box-sizing: border-box; 26 flex-shrink: 0; 27 } 28 .payment-badge img { 29 width: 100%; 30 height: 100%; 31 display: block; 32 object-fit: cover; 33 object-position: center; 34 } 35 .payment-badge.pad { 36 background: #ffffff; 37 padding: 10px 14px; 38 } 39 .payment-badge.pad img { 40 object-fit: contain; 41 } 42 .chrome-ext-btn { 43 display: inline-flex !important; 44 align-items: center; 45 gap: 8px; 46 font-size: 12px !important; 47 font-weight: 700 !important; 48 letter-spacing: 0.08em; 49 padding: 10px 18px !important; 50 white-space: nowrap; 51 } 52 .chrome-ext-btn svg { 53 width: 18px; 54 height: 18px; 55 } 56 .pricing-contact { 57 margin-top: 14px; 58 font-size: 11px; 59 color: #6b7c80; 60 letter-spacing: 0.2px; 61 } 62 .treatment-gif-grid { 63 display: grid; 64 grid-template-columns: repeat(2, 1fr); 65 gap: 14px; 66 cursor: pointer; 67 } 68 .treatment-gif-grid img { 69 width: 100%; 70 aspect-ratio: 16 / 9; 71 object-fit: cover; 72 border-radius: 10px; 73 border: 1px solid rgba(255, 176, 32, 0.25); 74 display: block; 75 transition: transform 0.25s ease, border-color 0.25s ease; 76 } 77 .treatment-gif-grid img:hover { 78 transform: translateY(-4px); 79 border-color: rgba(255, 176, 32, 0.6); 80 } 81 @media (max-width: 900px) { 82 .treatment-gif-grid { 83 grid-template-columns: repeat(2, 1fr); 84 } 85 } 86 @media (max-width: 520px) { 87 .treatment-gif-grid { 88 grid-template-columns: 1fr; 89 } 90 } 91 .winning-projects { 92 padding: 4rem 0 2rem; 93 container-type: inline-size; 94 } 95 .winning-projects-title { 96 margin: 0 0 2rem; 97 font-size: clamp(4rem, 12vw, 11rem); 98 font-size: 13cqw; 99 line-height: 1; 100 font-weight: 800; 101 letter-spacing: -0.02em; 102 white-space: nowrap; 103 color: var(--accent, #2BC4B0); 104 } 105 .video-grid { 106 display: grid; 107 grid-template-columns: repeat(2, 1fr); 108 gap: 1.5rem; 109 } 110 @media (max-width: 700px) { 111 .video-grid { grid-template-columns: 1fr; } 112 } 113 .video-card { 114 background: #000; 115 border-radius: 4px; 116 overflow: hidden; 117 border: 2px solid var(--accent, #2BC4B0); 118 } 119 .video-embed { 120 position: relative; 121 width: 100%; 122 padding-top: 56.25%; /* 16:9 */ 123 } 124 .video-embed iframe { 125 position: absolute; 126 top: 0; 127 left: 0; 128 width: 100%; 129 height: 100%; 130 border: 0; 131 } 132 #products .product-panorama { 133 display: grid !important; 134 grid-template-columns: 1fr !important; 135 width: 100%; 136 } 137 #products .product-panel { 138 width: 100%; 139 max-width: none; 140 } 141 #products .product-media-carousel.carousel-count-4 { 142 aspect-ratio: 16 / 9; 143 } 144 #products .product-media-track.is-split { 145 animation-play-state: paused !important; 146 transform: none !important; 147 display: grid !important; 148 grid-template-columns: repeat(2, 1fr) !important; 149 grid-template-rows: repeat(2, 1fr) !important; 150 gap: 6px !important; 151 height: 100%; 152 } 153 #products .product-media-track.is-split img { 154 flex: none !important; 155 min-width: 0 !important; 156 width: 100% !important; 157 height: 100% !important; 158 border-radius: 6px; 159 } 160 #products .panorama-copy { 161 padding-top: 20px; 162 } 163 #products .panorama-copy h3 { 164 font-size: 1.4rem; 165 } 166 #products .product-mini-description { 167 font-size: 1.05rem; 168 } 169 #about.workflow-section { 170 display: block !important; 171 } 172 #about .workflow-copy { 173 width: 100%; 174 } 175 </style> 176</head> 177<body> 178 <header class="site-header"> 179 <a class="brand-lockup" href="#" aria-label="WIP. DOCKET home">
180 <span class="corner-logo">WIP.DOCKET</span> 181 <span class="logo-divider"></span> 182 <span class="wordmark"> 183 <strong>WIP<span class="wordmark-dot">.</span>DOCKET</strong> 184 </span> 185 </a> 186 187 <nav class="site-nav" aria-label="Primary navigation"> 188 <a href="#winning-ads">WINNING ADS</a> 189 <a href="#about">ABOUT</a> 190 <a href="#products">EXTENSION</a> 191 <a href="treatments.html">TREATMENTS</a> 192 <a href="contact.html">CONTACT</a> 193 <a href="login.html">LOG IN</a> 194 </nav> 195 </header> 196 197 <main> 198 <section class="hero"> 199 <div class="suite-preview panorama-hero" aria-label="WIP. DOCKET moving product panorama"> 200 <div class="panorama-ceiling"></div> 201 <div class="panorama-floor"></div> 202 <div class="panorama-stage"> 203 <div class="panorama-track"> 204 <article class="panorama-slide"> 205 <img src="assets/1-video-library.png" alt="WIP. DOCKET Video Library dashboard"> 206 </article> 207 <article class="panorama-slide"> 208 <img src="assets/GIFS/3.gif" alt="Timestamp Note dashboard"> 209 </article> 210 <article class="panorama-slide"> 211 <img src="assets/3-ai-treatment-design.jpg" alt="AI Treatment Design dashboard"> 212 </article> 213 <article class="panorama-slide"> 214 <img src="assets/GIFS/11.gif" alt="File Transfer dashboard"> 215 </article> 216 </div> 217 </div> 218 </div> 219 </section> 220 221 <section id="treatment-gifs" class="section treatment-gif-section"> 222 <div class="section-heading"> 223 <h2 class="discover-heading"><span class="mega-section-word">TREATMENT</span></h2> 224 </div> 225 226 <div class="treatment-gif-grid clickable-card" data-card-href="treatments.html"> 227 <img src="assets/GIFS/1.gif" alt="Treatment Builder preview 1" loading="lazy"> 228 <img src="assets/GIFS/2.gif" alt="Treatment Builder preview 2" loading="lazy"> 229 <img src="assets/GIFS/3.gif" alt="Treatment Builder preview 3" loading="lazy"> 230 <img src="assets/GIFS/4.gif" alt="Treatment Builder preview 4" loading="lazy"> 231 <img src="assets/GIFS/5.gif" alt="Treatment Builder preview 5" loading="lazy"> 232 <img src="assets/GIFS/6.gif" alt="Treatment Builder preview 6" loading="lazy"> 233 <img src="assets/GIFS/7.gif" alt="Treatment Builder preview 7" loading="lazy"> 234 <img src="assets/GIFS/8.gif" alt="Treatment Builder preview 8" loading="lazy"> 235 <img src="assets/GIFS/9.gif" alt="Treatment Builder preview 9" loading="lazy"> 236 <img src="assets/GIFS/10.gif" alt="Treatment Builder preview 10" loading="lazy"> 237 <img src="assets/GIFS/11.gif" alt="Treatment Builder preview 11" loading="lazy"> 238 <img src="assets/GIFS/12.gif" alt="Treatment Builder preview 12" loading="lazy"> 239 </div> 240 </section> 241 242 <section id="winning-ads" class="section winning-projects" aria-label="Our winning projects"> 243 <h2 class="winning-projects-title">WINNING ADS</h2> 244 <div class="video-grid"> 245 <div class="video-card"> 246 <div class="video-embed"> 247 <iframe src="https://player.vimeo.com/video/955166357" title="Winning project video" loading="lazy" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe> 248 </div> 249 </div> 250 251 <div class="video-card"> 252 <div class="video-embed"> 253 <iframe src="https://player.vimeo.com/video/962185831" title="Winning project video" loading="lazy" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe> 254 </div> 255 </div> 256 257 <div class="video-card"> 258 <div class="video-embed"> 259 <iframe src="https://player.vimeo.com/video/907438089" title="Winning project video" loading="lazy" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe> 260 </div> 261 </div> 262 263 <div class="video-card"> 264 <div class="video-embed">
265 <iframe src="https://player.vimeo.com/video/1165678197" title="Winning project video" loading="lazy" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe> 266 </div> 267 </div> 268 269 <div class="video-card"> 270 <div class="video-embed"> 271 <iframe src="https://player.vimeo.com/video/1088834051" title="Winning project video" loading="lazy" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe> 272 </div> 273 </div> 274 275 <div class="video-card"> 276 <div class="video-embed"> 277 <iframe src="https://www.youtube-nocookie.com/embed/ic3z-3kGg6Y" title="Winning project video" loading="lazy" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe> 278 </div> 279 </div> 280 281 <div class="video-card"> 282 <div class="video-embed"> 283 <iframe src="https://www.youtube-nocookie.com/embed/eMw0JeCkrMg" title="Winning project video" loading="lazy" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe> 284 </div> 285 </div> 286 287 <div class="video-card"> 288 <div class="video-embed"> 289 <iframe src="https://www.youtube-nocookie.com/embed/NPp7iEALQQc" title="Winning project video" loading="lazy" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe> 290 </div> 291 </div> 292 293 <div class="video-card"> 294 <div class="video-embed"> 295 <iframe src="https://www.youtube-nocookie.com/embed/ZmYa4yA87MA" title="Winning project video" loading="lazy" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe> 296 </div> 297 </div> 298 </div> 299 </section> 300 301 <section id="about" class="section workflow-section"> 302 <div class="workflow-copy"> 303 <h2 class="about-heading"><span class="mega-section-word">ABOUT</span></h2> 304 <p>We write and design treatments for commercial directors and producers. Whether it's an open brief or a locked script, we develop the film and transform it into a director's treatment.</p> 305 306 <p>Got a brief? We may help you win the pitch.</p> 307 </div> 308 309 </section> 310 311 <section id="products" class="section product-section"> 312 <div class="section-heading"> 313 <h2 class="discover-heading"><span class="mega-section-word">EXTENSION</span></h2> 314 </div> 315 316 <div class="product-panorama" aria-label="WIP. DOCKET products"> 317 <article class="product-panel product-panel-tall clickable-card" data-card-href="https://chromewebstore.google.com/detail/ochpennmehknnkcffhaldnbegjnhkmge?utm_source=item-share-cb"> 318 <div class="panorama-media image-media product-media-carousel carousel-count-4"> 319 <div class="product-media-track"> 320 <img src="assets/PRODUCT%20FAMILY/VIDEO%20LIBRARY/Screenshot%20(2891).png" alt="WIP. DOCKET Video Library dashboard"> 321 <img src="assets/PRODUCT%20FAMILY/VIDEO%20LIBRARY/Screenshot%20(2893).png" alt="WIP. DOCKET Video Library saved reference view"> 322 <img src="assets/PRODUCT%20FAMILY/VIDEO%20LIBRARY/Screenshot%20(2913).png" alt="WIP. DOCKET Video Library grid view"> 323 <img src="assets/PRODUCT%20FAMILY/VIDEO%20LIBRARY/Screenshot%20(2914).png" alt="WIP. DOCKET Video Library preview"> 324 </div> 325 </div> 326 <div class="panorama-copy"> 327 <span class="product-kicker">WIP.DOCKET - Video Library</span> 328 <h3>BUILT FOR</h3> 329 <p class="built-for-audience">TVC directors, Visual Researcher, Assistant, etc.</p> 330 <p class="product-mini-description">Save Vimeo references, tag useful ideas, and build a searchable visual library. <a class="inline-read-more" href="video-library.html">Read more...</a></p> 331 <div class="panorama-actions"> 332 <a class="panorama-open-link chrome-ext-btn" href="https://chromewebstore.google.com/detail/ochpennmehknnkcffhaldnbegjnhkmge?utm_source=item-share-cb" target="_blank" rel="noopener"> 333 <img src="chrome-icon.png" alt="Chrome" width="20" height="20" style="flex-shrink:0;display:block;"> 334 CHROME EXTENSION 335 </a> 336 </div> 337 </div> 338 </article> 339 </div> 340 </section> 341 342 </main> 343 344
344<script> 345 document.querySelectorAll("[data-card-href]").forEach((card) => { 346 card.addEventListener("click", (event) => { 347 if (event.target.closest("a")) { 348 return; 349 } 350 351 window.location.href = card.dataset.cardHref; 352 }); 353 }); 354 </script>
354 355 356
356<script> 357 (function () { 358 const track = document.querySelector("#products .product-media-track"); 359 if (!track) return; 360 const imgs = Array.from(track.querySelectorAll("img")); 361 if (!imgs.length) return; 362 363 const SLIDE_DURATION = 14000; // matches the productImageSlide4 animation length in styles.css 364 const SPLIT_DURATION = 3000; // ms all images are shown together 365 366 function restartSlide() { 367 track.classList.remove("is-split"); 368 // force reflow so the CSS animation restarts cleanly from 0% 369 track.style.animation = "none"; 370 void track.offsetWidth; 371 track.style.animation = ""; 372 } 373 374 function showSplit() { 375 track.classList.add("is-split"); 376 } 377 378 function loop() { 379 restartSlide(); 380 setTimeout(() => { 381 showSplit(); 382 setTimeout(loop, SPLIT_DURATION); 383 }, SLIDE_DURATION); 384 } 385 386 loop(); 387 })(); 388 </script>
388 389 390 <footer class="site-footer"> 391 <nav class="footer-links" aria-label="Footer navigation"> 392 <a href="privacy.html">Privacy Policy</a> 393 <a href="terms.html">Terms</a> 394 <a href="contact.html">Contact</a> 395 </nav> 396 <p>© 2026 WIP.DOCKET</p> 397 </footer> 398</body> 399</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.