PageSourceSearch

https://nehemiedias.com/motion.html

html nehemiedias.com collected 2026-10-06 13:35:20 UTC 61,774 bytes, 1,158 lines download raw bytes

1<!DOCTYPE HTML>
2<html lang="en">
3	<head>
4
5			<meta charset="utf-8">
6				<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
7			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">			
8			<meta name="description" content="Nehemie Dias - Art Direction & Motion Design">
9			
10			<title>Motion Design - Néhémie Dias</title>
11
12
13			<link  rel="stylesheet" type="text/css" href="structure/css/style-projects.css" >
14			<link  rel="stylesheet" type="text/css" href="structure/css/style-header.css" >
15			<link  rel="stylesheet" type="text/css" href="structure/css/style-motion.css" >
16
17
18			<link  rel="stylesheet" href="structure/css/animate.css">
19			<link  rel="stylesheet" href="structure/css/hover-selection.css">
20
21
22			  
22<script
23			  src="https://code.jquery.com/jquery-3.4.1.min.js"
24			  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
25			  crossorigin="anonymous">
26			  </script>
26
27
28
29			     
29<script type="text/javascript" src="structure/js/wow-min.js"></script>
29
30			     
30<script>
31			 		wow = new WOW(
32					{
33					boxClass:     'wow',      // default
34					animateClass: 'animated', // default
35					offset:       0,          // default
36					mobile:       false,       // default
37					live:         true        // default
38					}
39					                )
40					wow.init();
41				  </script>
41
42
43
44
45			
45<script src="structure/js/jquery.plate.js"></script>
45
46
47				
47<script type="text/javascript" src="structure/js/html5lightbox/html5lightbox.js"></script>
47
48
49
50   			   
50<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
50
51			 	
51<script type="text/javascript" src="structure/js/js-projects.js"></script>
51 
52			 	
52<script type="text/javascript" src="structure/js/js-motion.js"></script>
52 
53
54				
54<script type="module" src="https://unpkg.com/@splinetool/[email protected]/build/spline-viewer.js"></script>
54
55							     
55<script>
56			    window.onload = function() {
57			        var shadowRoot = document.querySelector('spline-viewer').shadowRoot;
58			        shadowRoot.querySelector('#logo').remove();
59			    }
60								 </script>
60
61
62	</head>
63
64
65	<body class="background-darkgrey">
66
67		        <!-- CURSOR -->
68				<div class="circle stroke-beige">
69				  <svg width="400" height="400">
70				    <circle cx="80" cy="80" r="50" class="stroke-no-width" />
71				  </svg>
72				</div>
73
74
75       <!-- HEADER MENU -->
76
77                  <header>
78                 		<!-- LOGO -->
79                 	<a id="logo-link" href="index.html">	
80						<svg id="logo" version="1.1" class="fill-beige" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
81							 viewBox="0 0 210 120" style="enable-background:new 0 0 210 120;" xml:space="preserve">
82
83						<g>
84							<path  d="M207.57,66.93c-1.02,9.26-4.27,17.67-9.71,25.2c-6.77,9.37-15.45,16.31-26.1,20.75
85								c-8.57,3.57-17.56,4.92-26.76,4.95c-8.36,0.03-16.73,0.03-25.09,0.02v-0.01c-4.69,0.01-9.37,0.03-14.05-0.03
86								c-0.59-0.01-1.34-0.38-1.72-0.83C92.19,102.86,80.28,88.7,68.37,74.56C54.29,57.85,40.21,41.13,26.13,24.41
87								c-0.19-0.23-0.36-0.47-0.78-1.02v94.11h-2.21v-1.63c0-31.08-0.01-62.17,0.02-93.26c0-1.05-0.29-1.75-1.09-2.46
88								C15.77,14.56,9.51,8.91,3.23,3.27C2.92,2.98,2.59,2.71,2.04,2.23c0.67-0.04,1.04-0.07,1.41-0.07c9.31-0.01,18.62-0.02,27.94,0.03
89								c0.63,0.01,1.45,0.36,1.87,0.83c24.9,28.29,49.78,56.59,74.65,84.91l11.99,13.85c0.01,0.01,1.4,1.6,2.68,3.06
90								c3.69,4.22,8.42,7.45,13.75,9.15c6.09,1.94,11.7,1.76,14.91,1.44c5.44-0.61,10.61-2.21,15.36-4.97
91								c8.32-4.82,14.31-11.92,18.83-20.3c6.06-11.24,8.31-23.33,6.97-36c-1.56-14.71-8.64-26.43-19.98-35.56
92								c-7.45-6-16.24-9.22-25.36-11.56c-6.54-1.68-20.99-1.99-24.35-2.04c0,0,0,36.09,0,40.43c-16-31.56-42.17-43.03-42.35-43.2
93								l42.35,0.18c1.91,0.01,7.85,0.01,20.41,0c9.25-0.01,18.28,1.22,26.97,4.59c9.58,3.7,17.7,9.47,24.49,17.18
94								c4.88,5.55,8.53,11.79,10.79,18.86C207.86,50.84,208.46,58.82,207.57,66.93z"/>
95						</g>
96						</svg>
97					</a>
98
99
100                    <nav>
101                      <ul>
102
103                        <li><a class="beige link-underline-beige" href="index.html#about" id="header-about">About</a></li>               
104                        <li><a class="beige link-underline-beige" href="index.html#projects-graphic-showcase" id="header-projects">Projects</a></li> 
105                        <li><a class="beige link-underline-beige" href="index.html#sand2" id="header-showreel">Showreel</a></li>                           
106                      </ul>
107                    </nav>
108
109					<div class="clear">
110					</div>
111
112						<div id="title-motion" class="page-title">
113                 		   <p class="header-title1 beige text-left float-left">MOTION</p>
114                    		<p class="header-title2 title-stroke-beige text-right" data-wow-delay="0.06s">DESIGN</p>
115               			 </div>
116
117                  </header>
118
119
120
121					<div class="clear">
122					</div>
123
124
125       <!-- VIDEO THUMBNAILS -->
126
127
128
129       <div class="video-container">
130
131   		
132
133		   		 <!-- EIFFEL -->
134
135
136				<div  class="video left plate">
137			   			<a id="eiffel-popup" href="https://player.vimeo.com/video/172277783?color=ff9933&title=0&byline=0&portrait=0" class="html5lightbox"
138			   			data-description="<br/><p><strong>Gustave Eiffel - Motion Biography</strong></p>
139			   			<br/>
140			   			<p>The initial brief was to narrate the biography of a famous character through a short video. I picked Gustave Eiffel to reveal some of his unknown stories, hidden behind his remarkable famous Tower. After some online biography researches, I aimed to define a storyline offering smooth transitions between each life sequences, and could then create the art direction, illustrations, animations, video and sound editing, as well as re
140cording the voice-over.</p><br/>"
141						 target="blank">
142				   			<img class="bottom" src="data/img/motion/eiffel-hover.jpg" alt="eiffel-hover" />
143				   			<img class="top" src="data/img/motion/eiffel.jpg" alt="eiffel" />
144			   			</a>
145		   		</div>	
146
147		   							<div class="clear"></div>
148   		
149
150
151		   		 <!-- CACAO -->
152
153				   	<div  class="video left delay1 plate">
154			   			<a id="cacao-popup" href="https://player.vimeo.com/video/135148414?color=c9ff23&amp;byline=0&amp;portrait=0" class="html5lightbox"
155			   			data-description="<br/><p><strong>The origin of cocoa beans</strong></p>
156			   			<br/>
157			   			<p>This short motion design video aims to present the roots of cocoa beans. After doing some online researches on the beans' history, I created a storyline and wrote the voice-over before jumping into the visual process: quick sketches as a rough story-board, defining the visual style of the video, creating the illustrations, animating and adding the sounds/music.</p><br/>"
158						  target="blank">
159				   			<img  class="bottom" src="data/img/motion/cacao-hover.jpg" alt="cacao-hover" />
160				   			<img  class="top" src="data/img/motion/cacao.jpg" alt="cacao" />
161			   			</a>
162		   			</div>	
163
164		   							<div class="clear"></div>
165   		
166
167
168
169		   		 <!-- EIP -->
170
171				   	<div  class="video right delay3 plate">
172			   			<a id="eip-popup" href="https://player.vimeo.com/video/415642959?&color=ff9212&title=0&byline=0&portrait=0" class="html5lightbox"
173			   			data-description="<br/><p><strong>28 Squares (LOOP) for the Epitech Computing School</strong></p>
174			   			<br/>
175			   			<p>The Epitech Computing School requested a motion design video to celebrate the 10 years of their existence. I teamed up with three other motion designers to make the project happen. We had the idea of highlighting the technologic and innovative aspects of the school through 28 square illustrations. The squares are looping infinitely to represent the years passing by. We split the workload proportionally: I designed and animated 7 squares.</p><br/>"
176						 target="blank">
177				   			<img class="bottom" src="data/img/motion/eip-hover.jpg" alt="28squares-hover" />
178				   			<img class="top" src="data/img/motion/eip.jpg" alt="28squares" />
179			   			</a>
180		   			</div>	
181
182
183		   							<div class="clear"></div>
184
185					 <!-- SNOOP -->
186
187				   	<div class="video right delay2 plate">
188		   				<a id="snoop-popup" href="https://www.youtube.com/embed/DHFEbCGvB5E?autoplay=1&rel=0" class="html5lightbox"
189			   			data-description="<br/><p><strong>Snoop Dogg - Drop It Like It’s Hot | Motion Graphics</strong></p>
190			   			<br/>
191			   			<p>I love to explore the connexion between music and visuals and really wanted to create something around this song. Indeed, the rhythm combined with the onomatopoeia brings the potential of a playful visual outcome. I chose to illustrate the song through abstract shapes and typographies.</p><br/>"
192						 allow="autoplay" target="blank">
193				   			<img class="bottom" src="data/img/motion/snoop-hover.jpg" alt="snoopdogg-hover" />
194				   			<img class="top" src="data/img/motion/snoop.jpg" alt="snoopdogg" />
195			   			</a>				   		
196
197		   			</div>	
198
199
200		   							<div class="clear"></div>
201
202
203
204
205					 <!-- BVS -->
206
207				   	<div  class="video left delay3 plate">
208			   			<a id="bvs-popup" href="https://player.vimeo.com/video/172297302?color=f62230&title=0&byline=0&portrait=0" class="html5lightbox"
209			   			data-description="<br/><p><strong>Batman v Superman - Animated Poster</strong></p>
210			   			<br/>
211			   			<p>The official movie posters showed each superhero’s point of view, which gave me the idea to create a scene rotation animation. To start this personal project, I first downloaded the two poster images, then cropped the elements to create a 3D scene, which gave the opportunity to animate the 180° rotation. The goal was to highlight the intensity of the fight between the two characters by switching dynamically to each side.</p><br/>"
212						  target="blank" data-lightbox="autoplay:true;">
213				   			<img class="bottom" src="data/img/motion/bvs-hover.jpg" alt="bvs-hover" />
214				   			<img class="top" src="data/img/motion/bvs.jpg" alt="bvs" />
215			   			</a>
216		   			</div>	
217
218		   							<div class="clear"></div>
219   		
220
221
222					 <!-- COOKIE -->
223
224		   			<div class="video left delay3 plate">
225						<a id="cookie-popup" href="https://player.vimeo.com/video/135148411?color=f2292d&amp;byline=0&amp;portrait=0" class="html5lightbox"
226			   			data-description="<br/><p><strong>“Check Hands” for Tough Cookie</strong></p>
227			   			<br/>
228			   			<p>Tough Cookie is an underground fast-food, streetwear and tattoo shop based in Boulogne-Billencourt. To display their values and style in their shop, Tough Cookie asked for a variety of motion design sequences. Their branding was already defined so I could align on their visual guidelines to create the illustrations and animation. My sequence was then combined to other motion sequences from other designers to form a longer inspiring video.</p><br/>"
229						  target="blank">
230				   			<img class="bottom" src="data/img/motion/cookie-hover.jpg" alt="cookie-hover" />
231				   			<img class="top" src="data/img/motion/cookie.jpg" alt="cookie" />
232			   			</a>
233		   			</div>	
234
235		   							<div class="clear"></div>
236
237   					 <!-- HYPERWATCH-->
238
239		   			<div class="video right delay3 plate">
240						<a id="cookie-popup" href="https://player.vimeo.com/video/925878490?h=f116d7e1c4&amp;byline=0&amp;portrait=0" class="html5lightbox"
241			   			data-description="<br/><p><strong>Hyper Watch</strong></p>
242			   			<br/>
243			   			<p>I have created this scene as a personal project in order to experiment with the new 3D model integration of After Effects. I enjoyed playing with textures, lighting and effects. Note: The 3D watch was taken from a model library created externally.</p><br/>"
244						  target="blank">
245				   			<img class="bottom" src="data/img/motion/hyperwatch-hover.jpg" alt="hyperwatch-hover" />
246				   			<img class="top" src="data/img/motion/hyperwatch.jpg" alt="hyperwatch" />
247			   			</a>
248		   			</div>	
249
250		   							<div class="clear"></div>
251   		
252		
253
254
255					 <!-- LOGE -->
256
257				   	<div  class="video left delay3 plate">
258			   			<a id="loge-popup" href="https://player.vimeo.com/video/415228000?color=ff3333&title=0&byline=0&portrait=0" class="html5lightbox"
259			   			data-description="<br/><p><strong>I Loge You Fondation - Motion Presentation</strong></p>
260			   			<br/>
261			   			<p>The I Loge You Fondation was looking for a promotional video to gain awareness and to increase their donations in order to help people in needs. I teamed up with another motion designer to create the video. The fondation shared their logo and some data with us so we could create a storyline around it. After defining the visual style, we split the illustration and animation work proportionally (50/50): I created the video part from 00:21s to 00:50s and took care of the editing/sound.</p><br/>"
262						  target="blank"   >
263				   			<img class="bottom" src="data/img/motion/ilogeyou-hover.jpg" alt="ilogeyou-hover" />
264				   			<img class="top" src="data/img/motion/ilogeyou.jpg" alt="ilogeyou" />
265			   			</a>
266		   			</div>	
267
268		   							<div class="clear"></div>
269   		
270
271
272					 <!-- FUNKY -->
273		   			
274				   	<div class="video left delay3 plate">
275							<a id="funky-popup" href="https://www.youtube.com/embed/5KDKzdqqWXY?autoplay=1&rel=0" class="html5lightbox"
276			   			data-description="<br/><p><strong>Funky Shoe 'Uptown Funk'</strong></p>
277			   			<br/>
278			   			<p>My goal with this project was to experiment with 3D tools to create a fun video sequence spreading positive vibes. Inspired by the ‘Uptown Funk’ song, I defined a bright and colourful visual direction with a self-dancing shoe as a storyline. I created the 3D modeling and animation in Cinema4D before combining the sequences and adding typography/music in After Effects for the final render.</p><br/>"
279						 allow="autoplay" target="blank">
280				   			<img class="bottom" src="data/img/motion/funky-hover.jpg" alt="funky-hover" />
281				   			<img class="top" src="data/img/motion/funky.jpg" alt="funky" />
282			   			</a>	
283		   			</div>	
284
285		   							<div class="clear"></div>
286
287
288
289					 <!-- MIRROR -->
290
291				   	<div class="video right delay3 plate">
292				   		<a id="mirror-popup" href="https://player.vimeo.com/video/415403443?color=ffffff&amp;byline=0&amp;portrait=0" class="html5lightbox"
293			   			data-description="<br/><p><strong>Black Mirror - Opening Titles</strong></p>
294			   			<br/>
295			   			<p>For this fictional project, I collaborated with a 3D artist and two video editors. We worked together to define the concept: symbolising with a chess board the loss of freedom and power when facing technology, which is the main message of the series. I designed and animated the typographic inserts & glitch effects with the aim of bringing the digital aspect to the opening titles.</p><br/>"
296						 target="blank">
297				   			<img class="bottom" src="data/img/motion/mirror-hover.jpg" alt="mirror-hover" />
298				   			<img class="top" src="data/img/motion/mirror.jpg" alt="mirror" />
299			   			</a>					   		
300		   			</div>			   			
301
302
303		   							<div class="clear"></div>
304   		
305
306					 <!-- RATATOUILLE -->
307
308				   	<div  class="video left delay3 plate">
309			   			<a id="ratatouille-popup" href="https://player.vimeo.com/video/415226160?color=a963ff&title=0&byline=0&portrait=0" class="html5lightbox"
310			   			data-description="<br/><p><strong>Ratatouille - Motion from Paris</strong></p>
311			   			<br/>
312			   			<p>After watching the Ratatouille animation movie taking place in Paris, the idea of going to the places shown in the mov
312ie emerged. With a motion designer colleague, we thought of bringing the movie universe to the real world by integrating visual elements to those places. After one day of video shooting at Notre-Dame de Paris, I created the visual effects on the second shot (“Ratatouille” title sequence at 00:07s) and combined it with my colleague’s first sequence animation.</p><br/>"
313						  target="blank">
314				   			<img class="bottom" src="data/img/motion/ratatouille-hover.jpg" alt="ratatouille-hover" />
315				   			<img class="top" src="data/img/motion/ratatouille.jpg" alt="ratatouille" />
316			   			</a>
317		   			</div>	
318
319		   							<div class="clear"></div>
320   		
321					
322
323					 <!-- SPATIAL -->
324
325				   	<div class="video left delay3 plate">
326		   				<a id="spatial-popup" href="https://player.vimeo.com/video/415219980?title=0&byline=0&portrait=0" class="html5lightbox"
327			   			data-description="<br/><p><strong>Spatial World - 3D Motion</strong></p>
328			   			<br/>
329			   			<p>Inspired by the Interstellar movie, I collaborated with two motion designers to create a low-poly 3D scene taking place in another planet. The concept was to give the viewer the feeling of watching the sequence from a rotating aircraft/satellite. Using Cinema4D, I worked on the 3D modeling and texturing of multiple elements (plane, rocks, water etc…) and animated the scene, before adding the overlay and effects in After Effects.</p><br/>"
330						  target="blank">
331				   			<img class="bottom" src="data/img/motion/spatial-hover.jpg" alt="spatial-hover" />
332				   			<img class="top" src="data/img/motion/spatial.jpg" alt="spatial" />
333			   			</a>				   		
334
335		   			</div>	
336
337
338		   							<div class="clear"></div>
339
340					 <!-- DAVID -->
341
342				   	<div class="video left delay3 plate">
343		   				<a id="david-popup" href="https://www.youtube.com/embed/xmUI5Ekx4BI?autoplay=1&rel=0" class="html5lightbox"
344			   			data-description="<br/><p><strong>Ignis Fidei - David</strong></p>
345			   			<br/>
346			   			<p>Ignis Fidei is a musical and visual experimental project I have developed to push my creative boundaries with beat making and music production. My approach is holistic, which is why beyond music creation, the project consists of branding/visual identity, song art direction, motion design and merchandising. This song is inspired by the story of David and Goliath. To represent this theme visually, I chose the stop-motion technique to play around the Renaissance sculpture of David (Michelangelo), which is famous for the warning glare of the character’s eyes, ready to face the giant.</p><br/>"
347						  target="blank">
348				   			<img class="bottom" src="data/img/motion/david-hover.jpg" alt="david-hover" />
349				   			<img class="top" src="data/img/motion/david.jpg" alt="david" />
350			   			</a>				   		
351
352		   			</div>	
353
354
355		   							<div class="clear"></div>
356
357
358					 <!-- DANIEL -->
359
360				   	<div class="video left delay3 plate">
361		   				<a id="daniel-popup" href="https://www.youtube.com/embed/rn_bkyWM5MY?autoplay=1&rel=0" class="html5lightbox"
362			   			data-description="<br/><p><strong>Ignis Fidei - Daniel</strong></p>
363			   			<br/>
364			   			<p>Ignis Fidei is a musical and visual experimental project I have developed to push my creative boundaries with beat making and music production. My approach is holistic, which is why beyond music creation, the project consists of branding/visual identity, song art direction, motion design and merchandising. This song is inspired by the hero of the book of Daniel, who interprets dreams and receives apocalyptic visions. The color theme of the song is yellow, standing for originality and uniqueness. The video depicts symbols of a lion and fire, representing the den of lions where Daniel was thrown, and the furnace that his friends wen through.</p><br/>"
365						  target="blank">
366				   			<img class="bottom" src="data/img/motion/daniel-hover.jpg" alt="daniel-hover" />
367				   			<img class="top" src="data/img/motion/daniel.jpg" alt="daniel" />
368			   			</a>				   		
369
370		   			</div>	
371
372
373		   							<div class="clear"></div>		
374
375					 <!-- NICOZARUS -->
376
377				   	<div class="video left delay3 plate">
378		   				<a id="nicozarus-popup" href="https://www.youtube.com/embed/BXWL5K6US9k?autoplay=1&rel=0" class="html5lightbox"
379			   			data-description="<br/><p><strong>Ignis Fidei - Nicozarus</strong></p>
380			   			<br/>
381			   			<p>
381Ignis Fidei is a musical and visual experimental project I have developed to push my creative boundaries with beat making and music production. My approach is holistic, which is why beyond music creation, the project consists of branding/visual identity, song art direction, motion design and merchandising. This song is based on the Nicodemus and Lazarus stories. It is about rebirth: breaking the laws of physics and rationality to find life. To visually express this concept, I illustrated the character of Nicodemus finding life, symbolised by the plant in him, while the cycle of life goes on. Lazarus is also present with the stripes that are removed when he finds life.</p><br/>"
382						  target="blank">
383				   			<img class="bottom" src="data/img/motion/nicozarus-hover.jpg" alt="nicozarus-hover" />
384				   			<img class="top" src="data/img/motion/nicozarus.jpg" alt="nicozarus" />
385			   			</a>				   		
386
387		   			</div>	
388
389
390		   							<div class="clear"></div>	
391
392
393      			<!--ORAWA -->	   	
394
395				<div  class="video left delay3 plate">
396			   			<a id="orawa-popup" href="https://www.youtube.com/embed/Ks5X8E48Dn8?autoplay=1&rel=0" class="html5lightbox"  
397
398			   			data-description="<br/><p><strong>2017 Orawa Production Showreel - Néhémie Dias</strong></p>
399			   			<br/>
400			   			<p>A collection of motion design projects that I created when working at Orawa Production in 2016/2017.
401						Major projects clients: FNC - Emmanuel Macron speech, Universal Music, Et Je Choisis de Vivre Movie...
402						Disclaimer: Some projects were a team effort but most of the illustrations and animations shown in this video were executed by myself.
403						© Copyright Orawa Production - All Rights reserved.</p><br/>"
404						target="blank">
405				   			<img class="bottom" src="data/img/motion/orawa-hover.jpg" alt="orawa-hover" />
406				   			<img class="top" src="data/img/motion/orawa.jpg" alt="orawa" />
407			   			</a>
408		   		</div>	
409
410
411		   							<div class="clear"></div>
412   		
413
414			   		 <!--SQUARE GARDEN -->	   							
415
416				<div  class="video left delay3 plate">
417			   			<a id="sg-popup" href="https://www.youtube.com/embed/2R-BByPpQQU?autoplay=1&rel=0" class="html5lightbox"
418			   			data-description="<br/><p><strong>2015 Square Garden Showreel - Néhémie Dias</strong></p>
419			   			<br/>
420			   			<p>A collection of motion design projects that I created when working at Square Garden in 2014/2015.�
421								Major projects clients: Decathlon, Auchan, Saint-Gobain Group, I-CAD Ministry...
422								Disclaimer: the video also includes team projects and assets in which other team members where involved in the creating process (character animation, 3D assets).
423								© Copyright Square Garden - All Rights reserved.</p><br/>"
424						 target="blank">
425				   			<img class="bottom" src="data/img/motion/square-hover.jpg" alt="square-garden-hover" />
426				   			<img class="top" src="data/img/motion/square.jpg" alt="square-garden" />
427			   			</a>
428		   			</div>	
429
430		   							<div class="clear"></div>
431   		
432
433
434					<!-- REEL 2014 -->							   			
435
436				   	<div class="video right delay3 plate">
437				   		<a id="reel-popup" href="https://player.vimeo.com/video/98208873?color=ffffff&amp;byline=0&amp;portrait=0" class="html5lightbox"
438			   			data-description="<br/><p><strong>2014 Showreel - Motion Design<br/>Néhémie Dias</strong></p>
439			   			<br/>
440			   			<p>A collection of motion design projects that I worked on from 2012 to 2014.</p><br/>"
441						 target="blank">
442				   			<img class="bottom" src="data/img/motion/reel-hover.jpg" alt="reel-hover" />
443				   			<img class="top" src="data/img/motion/reel.jpg" alt="reel" />
444			   			</a>				   		
445		   			</div>	
446
447		   							<div class="clear"></div>
448   	
449
450
451   							 <!-- ANTOINETTE -->
452
453				   	<div  class="video left delay3 plate">
454			   			<a id="antoinette-popup" href="https://www.youtube.com/embed/Fb0C9zZTWYU?autoplay=1&rel=0" class="html5lightbox"
455			   			data-description="<br/><p><strong>Antoinette Poisson Paris - Traditional Wallpaper</strong></p>
456			   			<br/>
457			   			<p>As a challenge to highlight the arts & crafts hand-workers from Paris, I contacted Antoinette Poisson to create a promotional video for them. We agreed on one day of video shooting in their workshop to capture their traditional wallpaper creation process. Then, I edited the footage, colour graded it and added some texts inserts to give more context and insights into their work.</p><br/>"
458						  allow="autoplay" target="blank">
459				   			<img class="bottom" src="data/img/motion/antoinette-hover.jpg" alt="antoinettepoisson-hover" />
460				   			<img class="top" src="data/img/motion/antoinette.jpg" alt="antoinettepoisson" />
461			   			</a>
462		   			</div>	
463
464		   							<div class="clear"></div>
465
466		   							
467 					 <!-- CVV -->
468
469				   	<div class="video left delay3 plate">
470				   		<a id="cvv-popup" href="https://player.vimeo.com/video/135148413?byline=0&amp;portrait=0" class="html5lightbox"
471			   			data-description="<br/><p><strong>Curriculum Vitae Video</strong></p>
472			   			<br/>
473			   			<p>
473In this Motion Design, I wanted to present my Curriculum Vitae in an unexpected way: showing what I can’t do rather than portraying my skills. After defining the story and the sequences I wanted to show, I recorded the voice-over. Then, I followed the creative process: visual style, illustration, animation and editing/music. Fun fact: I actually learned the German language, life is unpredictable!</p><br/>"
474						  target="blank">
475				   			<img class="bottom" src="data/img/motion/cvv-hover.jpg" alt="cvv-hover" />
476				   			<img class="top" src="data/img/motion/cvv.jpg" alt="cvv" />
477			   			</a>
478		   			</div>	
479
480		   							<div class="clear"></div>
481   		  		
482
483
484					 <!-- SOUVENIR-->	<!--				
485
486				   	<div class="video left delay3 plate">
487		   				<a id="souvenir-popup" href="https://player.vimeo.com/video/162799844?color=ffffff&title=0&byline=0&portrait=0" class="html5lightbox"
488			   			data-description="<br/><p><strong>Le Souvenir Éteint (short movie)</strong></p>
489			   			<br/>
490			   			<p>“An elderly lady is fighting her Alzheimer disease to keep the memories of her true love.”
491								I was part of a production team of 6 designers to make this project happen. I was mainly involved in defining the concept of the video, taking care of the shot list, assisting with props on set and acting the opponent chess player, as well as adding the visual effects in post-production.</p><br/>"
492						 target="blank">
493				   			<img class="bottom" src="data/img/motion/souvenir-hover.jpg" alt="souvenir-hover" />
494				   			<img class="top" src="data/img/motion/souvenir.jpg" alt="souvenir" />
495			   			</a>				   		
496
497		   			</div>	
498
499		   							<div class="clear"></div>
500   					-->
501
502					 <!-- MRBOX-->	
503
504				   	<div  class="video left delay3 plate">
505			   			<a id="mrbox-popup" href="https://player.vimeo.com/video/172400704?color=c9ff23&title=0&byline=0&portrait=0" class="html5lightbox"
506			   			data-description="<br/><p><strong>Mister Box Origins - The birth of a Superhero</strong></p>
507			   			<br/>
508			   			<p>To promote his comics and his main character, “Mister Box”, an artist based in Lille requested a video showing the birth of his superhero. With a designer colleague, we planned and executed a one day video shoot at the artist’s workshop. I finalised the project by editing the footage, adding a music and exporting the video.</p><br/>"
509						 target="blank">
510				   			<img class="bottom" src="data/img/motion/mrbox-hover.jpg" alt="mrbox-hover" />
511				   			<img class="top" src="data/img/motion/mrbox.jpg" alt="mrbox" />
512			   			</a>
513		   			</div>	
514
515
516		   							<div class="clear"></div>
517   		
518
519					<!-- INNOV-->		   			
520
521				   	<div class="video right delay3 plate">
522				   		<a id="innov-popup" href="https://www.youtube.com/embed/8WwNBu95o1g?autoplay=1&rel=0" class="html5lightbox"
523			   			data-description="<br/><p><strong>Innov'Challenge - France is an Innovative Country | IMT Sorbonne of Paris</strong></p>
524			   			<br/>
525			   			<p>Innov'Challenge is an initiative promoting innovation in France by the IMT Sorbonne of Paris. The project managers requested a motion design video presenting three innovative projects.
526								I teamed up with 8 other motion designers to create the storyline and visual style for the video. I recorded the voice-over and each designer then created a sequence for the video (illustration + animation); mine is visible from 0:26s to 0:48s.</p><br/>"
527						  allow="autoplay" target="blank">
528				   			<img class="bottom" src="data/img/motion/innov-hover.jpg" alt="innov-hover" />
529				   			<img class="top" src="data/img/motion/innov.jpg" alt="innov" />
530			   			</a>
531		   			</div>	
532
533		   							<div class="clear"></div>
534   		
535
536					<!-- ROOM-->	<!--
537
538				   	<div class="video left delay3 plate">
539		   				<a id="room-popup" href="https://www.youtube.com/embed/4zsJ33c1Fzs?autoplay=1&rel=0" class="html5lightbox"
540			   			data-description="<br/><p><strong>The 2015 Room (short film)</strong></p>
541			   			<br/>
542			   			<p>“A man discovers a mysterious attic allowing him to relive events from the past. But what will the future be?”
543								This short film is a self-initiated project showcasing the events that happened in the world and my personal life during the first six months of the year 2015. First, I wrote the movie story and made a story-board out of it. Based on those documents, I filmed myself and edited the footage, colour graded it, added visual effects and musics to finalise the project.</p><br/>"
544						  allow="autoplay" target="blank">
545				   			<img class="bottom" src="data/img/motion/room-hover.jpg" alt="room-hover" />
546				   			<img class="top" src="data/img/motion/room.jpg" alt="room" />
547			   			</a>				   		
548		   			</div>	
549
550		   							<div class="clear"></div>
551   					-->
552
553					<!-- PORTE-->	
554
555				   	<div class="video left delay3 plate">
556						<a id="porte-popup" href="https://player.vimeo.com/video/125232062?color=ff9933&amp;byline=0&amp;portrait=0" class="html5lightbox"
557			   			data-description="<br/><p><strong>Porte de Paris / Lille - Historical Motion</strong></p>
558			   			<br/>
559			   			<p>This video is a presentation of the monument under a historical glance. After researching some facts about the building's history, I created 8 key icon symbols highlighting its identity.
560								I planned and executed one day of video shoot and created the final rotation around the monument by using the stop motion technique. I finalised the video by adding a soundtrack, color grading (blue personifying the royalty colour)  and editing the footage, as well as animating the icons.</p><br/>"
561						  target="blank">
562				   			<img class="bottom" src="data/img/motion/porte-hover.jpg" alt="porte-hover" />
563				   			<img class="top" src="data/img/motion/porte.jpg" alt="porte" />
564			   			</a>
565		   			</div>	
566
567
568		   							<div class="clear"></div>
569   		
570
571
572					<!-- HASLMAN-->					
573
574		   			<div class="video left delay3 plate">
575		   				<a id="halsman-popup" href="https://player.vimeo.com/video/415410541?color=3594ff&title=0&byline=0&portrait=0" class="html5lightbox"
576			   			data-description="<br/><p><strong>L’Anecdote 'Philippe Halsman' for the Jeu de Paume Museum of Paris</strong></p>
577			   			<br/>
578			   			<p>To promote their upcoming exhibition on the photgrapher Philippe Halsman, the Jeu de Paume Museum of Paris requested a video based on the artist’s work. In order to create this video, I teamed up with another designer to research the photographer’s life, conceptualise an humorous script, gather props, shoot and edit the footage.</p><br/>"
579						  target="blank">
580				   			<img class="bottom" src="data/img/motion/halsman-hover.jpg" alt="halsman-hover" />
581				   			<img class="top" src="data/img/motion/halsman.jpg" alt="halsman" />
582			   			</a>				   		
583
584		   			</div>	
585
586		   							<div class="clear"></div>
587   		
588
589					<!-- DEADCITY -->	
590
591				   	<div class="video right delay3 plate">
592		   				<a id="deadcity-popup" href="https://player.vimeo.com/video/415405682?color=ffffff&amp;byline=0&amp;portrait=0" class="html5lightbox"
593			   			data-description="<br/><p><strong>Dead City (Short Movie) - Opening Titles</strong></p>
594			   			<br/>
595			   			<p>The School of Cité from Luc Besson asked for an opening titles video to introduce their student film called Dead City: a world where the dead become lucid zombies, outcast from society and having to fight for their rights. The short movie was shot in a pub which inspired the opening concept: a travelling shot of a pub counter picturing a timeline of the zombie history. This fictional history was based on real events during the racial segregation in the U.S.A. I was helped by another designer who created the newsp
595aper layouts and photo retouching, while I took care of the animation and editing.</p><br/>"
596						  target="blank">
597				   			<img class="bottom" src="data/img/motion/deadcity-hover.jpg" alt="deadcity-hover" />
598				   			<img class="top" src="data/img/motion/deadcity.jpg" alt="deadcity" />
599			   			</a>				   		
600
601		   			</div>	
602
603		   							<div class="clear"></div>
604   		
605
606					<!-- EART -->	
607
608				   	<div  class="video left delay3 plate">
609			   			<a id="eart-popup" href="https://player.vimeo.com/video/172399894?color=ff0179&title=0&byline=0&portrait=0" class="html5lightbox"
610			   			data-description="<br/><p><strong>e-artsup Presentation - The school of creative passion</strong></p>
611			   			<br/>
612			   			<p>Having studied at e-artsup, my intentions were to present the school and especially its Motion Design 
613						speciality. To create the video, I developed a storyline and recorded the voice-over. Then, I worked on the art direction, illustrations, animations, compositing and sound editing to finalise the video.</p><br/>"
614						 target="blank">
615				   			<img class="bottom" src="data/img/motion/eart-hover.jpg" alt="eartsup-hover" />
616				   			<img class="top" src="data/img/motion/eart.jpg" alt="eartsup" />
617			   			</a>
618		   			</div>	
619
620
621		   							<div class="clear"></div>
622   		
623
624					<!-- IPOD-->						
625<!--
626				   	<div class="video left delay3 plate">
627				   		<a id="ipod-popup" href="https://player.vimeo.com/video/135128961?color=ff9933&amp;byline=0&amp;portrait=0" class="html5lightbox"
628			   			data-description="<br/><p><strong>Incredible iPod features! (CD Scan & Copy)</strong></p>
629			   			<br/>
630			   			<p>Being inspired by Zach King and his extraordinary special effect videos, I worked on a similar project showcasing a surrealist connexion from the digital world to the physical one.
631								After filming the sequence, I used After Effects to make the “magic” happen.</p><br/>"
632						  target="blank">
633				   			<img class="bottom" src="data/img/motion/ipod-hover.jpg" alt="ipod-hover" />
634				   			<img class="top" src="data/img/motion/ipod.jpg" alt="ipod" />
635			   			</a>				   		
636		   			</div>	
637
638
639		   							<div class="clear"></div>
640   	-->	
641
642					<!-- NEWYEAR -->	
643<!--
644				   	<div class="video right delay3 plate">
645				   		<a id="newyear-popup" href="https://player.vimeo.com/video/172294334?color=ede31a&amp;byline=0&amp;portrait=0" class="html5lightbox"
646			   			data-description="<br/><p><strong>Happy New Year!</strong></p>
647			   			<br/>
648			   			<p>To wish a happy new year in an unconventional way, I had the idea of a ball bouncing twelve times, going through each month of the past year. The locations where the ball hits illustrates the unpredictable nature of life and can be interpreted in various ways: a time to experiment, to rest, to get new ideas, to play, to open new doors… The video ends on the perspective that offers the road of the new year.</p><br/>"
649						 target="blank">
650				   			<img class="bottom" src="data/img/motion/newyear-hover.jpg" alt="newyear-hover" />
651				   			<img class="top" src="data/img/motion/newyear.jpg" alt="newyear" />
652			   			</a>					   		
653		   			</div>	
654
655
656		   							<div class="clear"></div>
657   		-->
658
659					<!-- DOP -->	
660
661				   	<div class="video left delay3 plate">
662				   		<a id="dop-popup" href="https://player.vimeo.com/video/135131832?byline=0&amp;portrait=0" class="html5lightbox"
663			   			data-description="<br/><p><strong>Vivelle Dop Gel - Advertisement Parody</strong></p>
664			   			<br/>
665			   			<p>I created this video to make fun of the unrealistic commercials that are displayed on TV. After analysing each camera shot of the “Vivelle Dop - Fixation Béton” advertisement, I planned and executed a video shoot to reproduce the commercial but (slightly) changed the end. Then, I wrote and recored the voice-over, edited the footage, created the typographic inserts and added a music to obtain the final outcome.</p><br/>"
666						 target="blank">
667				   			<img class="bottom" src="data/img/motion/dop-hover.jpg" alt="dop-hover" />
668				   			<img class="top" src="data/img/motion/dop.jpg" alt="dop" />
669			   			</a>
670		   			</div>	
671
672
673		   							<div class="clear"></div>
674   		
675
676
677					<!-- NEWTON-->	
678
679					<div class="video left delay3 plate">
680				   		<a id="newton-popup" href="https://player.vimeo.com/video/98062034?byline=0&amp;portrait=0" class="html5lightbox"
681			   			data-description="<br/><p><strong>The Discovery of the Law of Gravity by Newton</strong></p>
682			   			<br/>
683			   			<p>This video is a motion technique experimentation highlighting the researches of Newton toward the Law of Gravity. Inspired by the myth of Newton discovering the gravity from a falling apple, I imagined a surrealistic chain reaction that would have led the apple to hit Newton in an absurd way. The techniques I used to create this video are the following: digital animation, chalk handwriting, stop motion of paper / leaves / cotton, charcoal drawing, paper cut.</p><br/>"
684						 target="blank">
685				   			<img class="bottom" src="data/img/motion/newton-hover.jpg" alt="newton-hover" />
686				   			<img class="top" src="data/img/motion/newton.jpg" alt="newton" />
687			   			</a>						
688					</div>
689
690		   							<div class="clear"></div>
691   		
692
693					<!-- MUXXI -->												
694	
695					<div class="video right delay3 plate">
696				   		<a id="muxxi-popup" href="https://player.vimeo.com/video/98074421?color=c9ff23&amp;byline=0&amp;portrait=0" class="html5lightbox"
697			   			data-description="<br/><p><strong>Muxxi’s work animated</strong></p>
698			   			<br/>
699			   			<p>Muxxi is an illustrator with love for character design. I thought that it would be interesting to bring to life her quirky and colorful style full of bold and whimsical creatures.
700								I used this opportunity to promote her upcoming exhibition. Since I did not have access to the illustration open files, most of the work was to crop every element before being able to animate them.</p><br/>"
701						  target="blank">
702				   			<img class="bottom" src="data/img/motion/muxxi-hover.jpg" alt="muxxi-hover" />
703				   			<img class="top" src="data/img/motion/muxxi.jpg" alt="muxxi" />
704			   			</a>								
705					</div>
706		   							<div class="clear"></div>
707   		
708
709					<!-- GUERRE -->		
710<!--
711		   			<div class="video right delay3 plate">
712				   		<a id="guerre-popup" href="https://player.vimeo.com/video/98058679?color=ff0179&amp;title=0&amp;byline=0&amp;portrait=0" class="html5lightbox"
713			   			data-description="<br/><p><strong>The polluting heritage of the Great War</strong></p>
714			   			<br/>
715			   			<p>For the centenary of the First World War, I teamed up with 4 designers to present unknown information about its pollution in an illustrative way. This video content was designed to be played in loop for a fictional War Museum. We created a data visualisation graphic and this video during a one week workshop, in collaboration with the ESJ Journalism High School of Lille who provided the data. I was especially involved in the visual concept, illustration of the maps and animation of the video.</p><br/>"
716						  target="blank">
717				   			<img class="bottom" src="data/img/motion/guerre-hover.jpg" alt="guerre-hover" />
718				   			<img class="top" src="data/img/motion/guerre.jpg" alt="guerre" />
719			   			</a>				   		
720		   			</div>
721
722
723		   							<div class="clear"></div>
724   	-->
725
726					<!-- COMPAGNON -->
727<!--
728				   	<div class="video left delay3 plate">
729		   				<a id="compagnon-popup" href="https://player.vimeo.com/video/172399662?color=ffffff&title=0&byline=0&portrait=0" class="html5lightbox"
730			   			data-description="<br/><p><strong>Le Compagnon Blanc - Introductory Credits</strong></p>
731			   			<br/>
732			   			<p>Le Compagnon Blanc is an association organising adapted holiday stays for adults with mild or moderate mental disabilities. In need of an introductory credits motion video for their digital content, the association contacted me. I based the visual direction around their logo and branding, the ladybug being their symbol.</p><br/>"
733						 target="blank">
734				   			<img class="bottom" src="data/img/motion/compagnon-hover.jpg" alt="compagnon-hover" />
735				   			<img class="top" src="data/img/motion/compagnon.jpg" alt="compagnon" />
736			   			</a>				   		
737
738		   			</div>	
739
740		   							<div class="clear"></div>
741   		-->	
742
743					<!-- DREAM -->
744<!--
745				   	<div class="video left delay3 plate">
746				   		<a id="dream-popup" href="https://player.vimeo.com/video/98062033?color=ffffff&amp;byline=0&amp;portrait=0" class="html5lightbox"
747			   			data-description="<br/><p><strong>'I Have a Dream'' Martin Luther King  - animated extract</strong></p>
748			   			<br/>
749			   			<p>I created this video while participating in a time restricted challenge: creating a motion design video in less than four hours, based on an extract of MLK’s famous speech.
750								My intention was to illustrate the words and create visual transitions in order to bring more life to the speech.</p><br/>"
751						 target="blank">
752				   			<img class="bottom" src="data/img/motion/dream-hover.jpg" alt="dream-hover" />
753				   			<img class="top" src="data/img/motion/dream.jpg" alt="dream" />
754			   			</a>				   		
755		   			</div>	
756
757		   							<div class="clear"></div>
758   		 			
759	-->	
760		       <!--
761					<div class="video delay3 left wow" data-wow-delay="0.2s">
762				   		<a href="https://player.vimeo.com/video/98062032?color=ff9933&amp;byline=0&amp;portrait=0autoPlay=true" class="html5lightbox" data-width="1280" data-height="720" title="Hansel &amp; Gretel Teaser - 3D Pop-Up" target="blank">
763				   			<img class="bottom" src="data/img/motion/conte-hover.jpg" alt="conte-hover" />
764				   			<img class="top" src="data/img/motion/conte.jpg" alt="conte" />
765			   			</a>		
766					</div>
767			-->
768
769
770					<!-- UPCOMING -->				
771
772				   	<div class="video right delay3 plate">
773				   		<a id="up-popup" href="https://player.vimeo.com/video/98058681?color=f73816&amp;byline=0&amp;portrait=0" class="html5lightbox"
774			   			data-description="<br/><p><strong>UpComing - Opening Titles & Lower Third</strong></p>
775			   			<br/>
776			   			<p>This video is a fictional project for the O-Five channel’s new Hip-Hop program called “UpComing”. I designed a logo based on the channel style and program topic. For the opening titles, my intention was to illustrate the Hip-Hop universe in a hand draw unpolished style matching the music genre. Therefore, I used the frame by frame traditional animation technique. Since the program has focused on upcoming new artists, I animated paper textures to highlight the music writing process and experimenting work of those artists.</p><br/>"
777						 target="blank">
778				   			<img class="bottom" src="data/img/motion/up-hover.jpg" alt="up-coming-hover" />
779				   			<img class="top" src="data/img/motion/up.jpg" alt="up-coming" />
780			   			</a>				   		
781		   			</div>
782
783		   							<div class="clear"></div>
784   				   			
785
786				<!--
787					<div class="video left wow" data-wow-delay="0.1s">
788				   		<a href="https://player.vimeo.com/video/98058680?color=ff9933&amp;byline=0&amp;portrait=0autoPlay=true" class="html5lightbox" data-width="1280" data-height="720" title="M-Animations Logo - Motion Design" target="blank">
789				   			<img class="bottom" src="data/img/motion/m-hover.jpg" alt="m-animations-hover" />
790				   			<img class="top" src="data/img/motion/m.jpg" alt="m-animations" />
791			   			</a>							
792					</div>
793				-->
794
795
796				<!--
797				   	<div class="video right wow" data-wow-delay="0s">
798				   		<a href="https://www.youtube.com/embed/ctsVBvBpQXg?rel=0autoPlay=true&rel=0" class="html5lightbox" data-width="1280" data-height="720" allow="autoplay" title="Générique NOIRE - Stop Motion/Papier journal" target="blank">
799				   			<img class="bottom" src="data/img/motion/noire-hover.jpg" alt="noire-hover" />
800				   			<img class="top" src="data/img/motion/noire.jpg" alt="noire" />
801			   			</a>					   		
802		   			</div>
803
804				-->
805
806			<p id="headline" class="beige wow">Videos from project pages</p>
807
808			<div id="line" class="background-beige wow" data-wow-delay="0.3s">
809            </div> 
810
811        			<!--PROTON PASS -->	   	
812
813				<div  class="video left plate delay2">
814			   			<a id="protonpass-popup" href="https://www.youtube.com/embed/J6fCp00gnCA?autoplay=1&rel=0" class="html5lightbox"  
815
816			   			data-description="<br/><p><strong>Proton Pass Launch</strong></p>
817			   			<br/>
818			   			<p>
818I was tasked with producing a compelling motion design to introduce the features and benefits of the password manager, Proton Pass, for its launch. This project involved close collaboration with various stakeholders, including the CEO, to ensure alignment on the script. Subsequently, I took over the creation phase of the video, from storyboarding and illustrating to animation. External support was enlisted for the inclusion of sound elements.</p><br/>"
819						target="blank">
820				   			<img class="bottom" src="data/img/motion/protonpass-hover.jpg" alt="proton-hover" />
821				   			<img class="top" src="data/img/motion/protonpass.jpg" alt="proton" />
822			   			</a>
823		   		</div>	
824
825
826		   							<div class="clear"></div> 
827
828       			<!--PROTON REBRANDING -->	   	
829
830				<div  class="video left delay3 plate">
831			   			<a id="proton-popup" href="https://www.youtube.com/embed/FYD3spqLEe8?autoplay=1&rel=0" class="html5lightbox"  
832
833			   			data-description="<br/><p><strong>Proton Rebranding</strong></p>
834			   			<br/>
835			   			<p>In 2022, Proton started a new design journey to better serve the community 
with exceptional products and an attractive brand. To showcase this rebranding and its achievements, I was entrusted with the creation of an impactful motion design. The scope of my work spanned the entire project lifecycle, including script development, storyboarding, illustrating, animating, editing and integrating sound elements.</p><br/>"
836						target="blank">
837				   			<img class="bottom" src="data/img/motion/proton-hover.jpg" alt="proton-hover" />
838				   			<img class="top" src="data/img/motion/proton.jpg" alt="proton" />
839			   			</a>
840		   		</div>	
841
842
843		   							<div class="clear"></div>
844
845
846
847       			<!--PROTON SIGNATURES -->	   	
848
849				<div  class="video right delay3 plate">
850			   			<a id="proton-popup" href="https://www.youtube.com/embed/VU0UbLU9FY4?autoplay=1&rel=0" class="html5lightbox"  
851
852			   			data-description="<br/><p><strong>Proton Signatures</strong></p>
853			   			<br/>
854			   			<p>To visually represent Proton's values of security, privacy, and transparency, I was tasked to create a set of motion animation signatures. Each product has its own signature that's consistent with the rest of the Proton ecosystem. Through cognitive design and morphing animation into the product logos, it is emphasized that you’re choosing to protect your digital life by choosing Proton.</p><br/>"
855						target="blank">
856				   			<img class="bottom" src="data/img/motion/proton-signatures-hover.jpg" alt="proton-signatures-hover" />
857				   			<img class="top" src="data/img/motion/proton-signatures.jpg" alt="proton-signatures" />
858			   			</a>
859		   		</div>	
860
861
862		   							<div class="clear"></div>
863
864
865       			<!--RUNTASTIC REBRANDING -->	   	
866
867				<div  class="video left delay3 plate">
868			   			<a id="proton-popup" href="https://www.youtube.com/embed/NyTrINWeOOM?autoplay=1&rel=0" class="html5lightbox"  
869
870			   			data-description="<br/><p><strong>adidas Runtastic Rebranding</strong></p>
871			   			<br/>
872			   			<p>In 2019, as part of the Brand Design team, I took part in the rebranding of the Runtastic brand. The goal was to take the adidas collaboration to the next level by creating a new look and align both brands visually. Aside from updating hundreds of visual assets, I also created a motion design to promote the union to the adidas brand. The brand announcement campaign won the 'Audience Honor in Brand Redesign' Shorty Award.</p><br/>"
873						target="blank">
874				   			<img class="bottom" src="data/img/motion/runtastic-rebranding-hover.jpg" alt="runtastic-rebranding-hover" />
875				   			<img class="top" src="data/img/motion/runtastic-rebranding.jpg" alt="runtastic-rebranding" />
876			   			</a>
877		   		</div>	
878
879
880		   							<div class="clear"></div>
881
882       			<!--RUNTASTIC BRAND SHOWREEL -->	   	
883
884				<div  class="video left delay3 plate">
885			   			<a id="proton-popup" href="https://www.youtube.com/embed/5nEo003akLw?autoplay=1&rel=0" class="html5lightbox"  
886
887			   			data-description="<br/><p><strong>adidas Runtastic Brand Showreel</strong></p>
888			   			<br/>
889			   			<p>To celebrate the end of an era of the Runtastic brand due to its rebranding to adidas, I compiled some projects that I have been working with the Brand Design team from 2017 to 2019. Disclaimer: the video also includes team projects and assets where other team members have been involved in the creation process.</p><br/>"
890						target="blank">
891				   			<img class="bottom" src="data/img/motion/runtastic-reel-hover.jpg" alt="runtastic-showreel-hover" />
892				   			<img class="top" src="data/img/motion/runtastic-reel.jpg" alt="runtastic-showreel" />
893			   			</a>
894		   		</div>	
895
896
897		   							<div class="clear"></div>
898
899       			<!--RUNTASTIC POSTER CREATION TIMELAPSE -->	   	
900
901				<div  class="video right delay3 plate">
902			   			<a id="proton-popup" href="https://youtu.be/lF3e1F6PPKE?autoplay=1&rel=0" class="html5lightbox"  
903
904			   			data-description="<br/><p><strong>adidas Runtastic Poster Creation Timelapse - Wine & Design</strong></p>
905			   			<br/>
906			   			<p>At the beginning of 2019, I was in charge of the Wine & Design project, which was a showcase exhibition of the Brand Design team’s work. To catch the eye of the viewer at the entrance of the event, I set-up an animation of physical posters with video projection. Every team member had created a poster for the event. I recorded a timelapse displaying the creative process of my poster to provide insights on Design workflows.</p><br/>"
907						target="blank">
908				   			<img class="bottom" src="data/img/motion/runtastic-timelapse-hover.jpg" alt="runtastic-timelapse-hover" />
909				   			<img class="top" src="data/img/motion/runtastic-timelapse.jpg" alt="runtastic-timelapse" />
910			   			</a>
911		   		</div>	
912
913
914		   							<div class="clear"></div>
915
916       			<!--RUNTASTIC EXHIBITION POSTER PROJECTION -->	   	
917
918				<div  class="video left delay3 plate">
919			   			<a id="proton-popup" href="https://www.youtube.com/embed/6d6Auwep1Fk?autoplay=1&rel=0" class="html5lightbox"  
920
921			   			data-description="<br/><p><strong>adidas Runtastic Poster Exhibition - Wine & Design</strong></p>
922			   			<br/>
923			   			<p>At the beginning of 2019, I was in charge of the Wine & Design project, which was a showcase exhibition of the Brand Design team’s work. To catch the eye of the viewer at the entrance of the event, I set-up an animation of physical posters with video projection. Every team member had created a poster for the event, mine is included as well in the video.</p><br/>"
924						target="blank">
925				   			<img class="bottom" src="data/img/motion/runtastic-exhibition-hover.jpg" alt="runtastic-exhibition-hover" />
926				   			<img class="top" src="data/img/motion/runtastic-exhibition.jpg" alt="runtastic-exhibition" />
927			   			</a>
928		   		</div>	
929
930
931		   							<div class="clear"></div>
932
933
934       			<!--GENESE SHOWREEL -->	   	
935
936				<div  class="video left delay3 plate">
937			   			<a id="proton-popup" href="https://player.vimeo.com/video/171321625?h=36e16da379?byline=0&amp;portrait=0" class="html5lightbox"  
938
939			   			data-description="<br/><p><strong>Genèse Projects Showreel</strong></p>
940			   			<br/>
941			   			<p>I complied various projects I have created for multiple clients while building Genèse. The associative project Genèse aims to meet the specific creative & design needs of Christian organisations while understanding their beliefs and values. This project is the case study of my Design Master Thesis at e-artsup about the Communication of Christianity in the digital era.</p><br/>"
942						target="blank">
943				   			<img class="bottom" src="data/img/motion/genese-reel-hover.jpg" alt="genese-reel-hover" />
944				   			<img class="top" src="data/img/motion/genese-reel.jpg" alt="genese-reel" />
945			   			</a>
946		   		</div>	
947
948
949		   							<div class="clear"></div>
950
951       			<!--GENESE VISION -->	   	
952
953				<div  class="video right delay3 plate">
954			   			<a id="proton-popup" href="https://player.vimeo.com/video/172140918?h=231f8e26b5?byline=0&amp;portrait=0" class="html5lightbox"  
955
956			   			data-description="<br/><p><strong>Genèse Vision - Motion presentation</strong></p>
957			   			<br/>
958			   			<p>I art directed, scripted, designed and animated this presentation video of my associative project Genèse, which aims to meet the specific creative & design needs of Christian organisations while understanding their beliefs and values. This project is the case study of my Design Master Thesis at e-artsup about the Communication of Christianity in the digital era.</p><br/>"
959						target="blank">
960				   			<img class="bottom" src="data/img/motion/genese-pres-hover.jpg" alt="genese-pres-hover" />
961				   			<img class="top" src="data/img/motion/genese-pres.jpg" alt="genese-pres" />
962			   			</a>
963		   		</div>	
964
965
966		   							<div class="clear"></div>
967
968
969       			<!--GENESE LIBRE -->	   	
970
971				<div  class="video left delay3 plate">
972			   			<a id="proton-popup" href="https://player.vimeo.com/video/170775733?h=ef56cc50b4?byline=0&amp;portrait=0" class="html5lightbox"  
973
974			   			data-description="<br/><p><strong>Genèse - Libre & Jolie</strong></p>
975			   			<br/>
976			   			<p>Libre & Jolie is an independent studio of image consulting, specialised in fashion, body positivity and trends. To present their brand and activity, I have created an introductory video showcasing key aspects of Libre & Jolie’s business and work processes. Throughout the video editing, I aimed at visualising the playfulness and creativity of image consulting with the usage of colourful inserts, bold typography, match cuts, and reframing.</p><br/>"
977						target="blank">
978				   			<img class="bottom" src="data/img/motion/genese-libre-hover.jpg" alt="genese-libre-hover" />
979				   			<img class="top" src="data/img/motion/genese-libre.jpg" alt="genese-libre" />
980			   			</a>
981		   		</div>	
982
983
984		   							<div class="clear"></div>
985
986
987       			<!--GRAPHIC SHOWCASE JET -->	   	
988
989				<div  class="video left delay3 plate">
990			   			<a id="proton-popup" href="https://player.vimeo.com/video/98062040?h=8aa8b1d796?byline=0&amp;portrait=0" class="html5lightbox"  
991
992			   			data-description="<br/><p><strong>Graphic Showcase - Jet character animation</strong></p>
993			   			<br/>
994			   			<p>
994I designed and animated ‘Jet’ for a video game. This character is named after his ability to surf with a flying skate to escape from his original virtual world. Taking advantage of his freedom, Jet then developed a passion for music and urban culture. His cube, a technological prodigy designed by himself, gives him the power to memorize sounds that surround him and to spread waves. Teleporting from virtual universe to another thanks to the sound waves, Jet will not let anyone stands in his way.</p><br/>"
995						target="blank">
996				   			<img class="bottom" src="data/img/motion/jet-hover.jpg" alt="jet-hover" />
997				   			<img class="top" src="data/img/motion/jet.jpg" alt="jet" />
998			   			</a>
999		   		</div>	
1000
1001
1002		   							<div class="clear"></div>
1003
1004
1005       			<!--GRAPHIC SHOWCASE FLAMME -->	   	
1006
1007				<div  class="video right delay3 plate">
1008			   			<a id="proton-popup" href="https://player.vimeo.com/video/98062035?h=90028dc2cc?byline=0&amp;portrait=0" class="html5lightbox"  
1009
1010			   			data-description="<br/><p><strong>Graphic Showcase - ‘Il était une flamme’ Tablet app</strong></p>
1011			   			<br/>
1012			   			<p>This tablet prototype application gives children the possibility to create their own story of the little flame, as well as interacting with natural elements (clouds, wind, rain...) which it is confronted. This application is linked to a book : that is to say, children can make the scenario evolve by following the book indications while reading. By becoming an actor in the life cycle through the symbol of the flame, the child assimilates more easily the message that the book brings. Children can then play again and create other scenarios, according to their imagination...</p><br/>"
1013						target="blank">
1014				   			<img class="bottom" src="data/img/motion/flamme-hover.jpg" alt="flamme-hover" />
1015				   			<img class="top" src="data/img/motion/flamme.jpg" alt="flamme" />
1016			   			</a>
1017		   		</div>	
1018
1019
1020		   							<div class="clear"></div>
1021
1022
1023
1024
1025
1026		</div>
1027
1028					<div class="clear">											
1029					</div>
1030
1031
1032       			<!-- SHOWREEL SPLINE-->						
1033
1034						<a id="showreel-popup" href="https://player.vimeo.com/video/419340632?h=ee8f0e8289?autoplay=1&rel=0" class="html5lightbox"  
1035
1036			   			data-description="<br/><p><strong>Showreel - Motion Design | Néhémie Dias</strong></p>
1037			   			<br/>
1038			   			<p>A compilation of motion design projects I have created over the past few years.
1039						</p><br/>"
1040						target="blank">
1041
1042								<spline-viewer id=“spline” url="https://prod.spline.design/OJksfcvssNgtLF8E/scene.splinecode">
1043									
1044								</spline-viewer>
1045
1046			   			</a>
1047
1048					<div class="clear">											
1049					</div>
1050
1051
1052
1053		<!-- FOOTER DESKTOP -->
1054
1055                  <footer>
1056
1057                  	<ul class="wrapper mobile-display-none">
1058                  		<li class="arrow-left no-padding-left float-left wow" data-wow-delay="0s">
1059                  			<a class="footer-arrow beige wow" href="index.html#motion-anchor">
1060                  			&lt;
1061                  			</a>	
1062                  		</li>
1063
1064                  		<li class="wow" data-wow-delay="0.5s">
1065                  			<a class="beige link-underline-beige wow" href="index.html#proton-anchor">
1066                  			Proton
1067                  			</a>	
1068                  		</li>	
1069
1070
1071                  		<li class="wow" data-wow-delay="0s">
1072                  			<a class="beige link-underline-beige" href="index.html#runtastic-anchor">
1073                  			adidas Runtastic
1074                  			</a>	
1075                  		</li>	
1076
1077                  		<li class="wow" data-wow-delay="0.25s">
1078                  			<a class="beige link-underline-beige header-active-beige wow" href="index.html#motion-anchor">
1079                  			Motion Design
1080                  			</a>	
1081                  		</li>	
1082
1083
1084                  		<li class="wow" data-wow-delay="0.4s">
1085                  			<a class="beige link-underline-beige wow" href="index.html#genese-anchor">
1086                  			Genèse
1087                  			</a>	
1088                  		</li>	
1089
1090                  		<li class="wow" data-wow-delay="0.6s">
1091                  			<a class="beige link-underline-beige wow" href="index.html#graphic-showcase-anchor">
1092                  			Graphic Showcase
1093                  			</a>	
1094                  		</li>	
1095
1096                  		<li class="arrow-right no-padding-right float-right wow" data-wow-delay="0.7s">
1097                  			<a class="footer-arrow beige wow" href="index.html#genese-anchor">
1098                  			&gt;
1099                  			</a>	
1100                  		</li>	
1101
1102                  	</ul>	
1103
1104
1105		<!-- FOOTER MOBILE (ANCHOR CHANGE) -->
1106
1107                  	<ul class="wrapper mobile-display">
1108                  		<li class="arrow-left no-padding-left float-left">
1109                  			<a class="footer-arrow beige" href="index.html#motion-img-mobile">
1110                  			&lt;
1111                  			</a>	
1112                  		</li>
1113
1114                  		<li>
1115                  			<a class="beige link-underline-beige" href="index.html#proton-img-mobile">
1116                  			Proton
1117                  			</a>	
1118                  		</li>	                  		
1119
1120                  		<li>
1121                  			<a class="beige link-underline-beige" href="index.html#runtastic-img-mobile">
1122                  			adidas Runtastic
1123                  			</a>	
1124                  		</li>	
1125
1126                  		<li>
1127                  			<a class="beige link-underline-beige header-active-beige" href="index.html#motion-img-mobile">
1128                  			Motion Design
1129                  			</a>	
1130                  		</li>	
1131
1132
1133                  		<li>
1134                  			<a class="beige link-underline-beige" href="index.html#genese-img-mobile">
1135                  			Genèse
1136                  			</a>	
1137                  		</li>	
1138
1139
1140                  		<li>
1141                  			<a class="beige link-underline-beige" href="index.html#graphic-showcase-img-mobile">
1142                  			Graphic Showcase
1143                  			</a>	
1144                  		</li>	
1145
1146                  		<li class="arrow-right no-padding-right float-right">
1147                  			<a class="footer-arrow beige" href="index.html#genese-img-mobile">
1148                  			&gt;
1149                  			</a>	
1150                  		</li>	
1151
1152                  	</ul>	
1153                  </footer>					
1154
1155	</body>
1156
1157
1158</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.